Twenty Twenty: Author bio and bottom post meta misaligned on mobile

[Anlino]

On screens thinner than 660px, the author bio, tags and edit links displayed beneath the entry content on single posts (and pages, for the edit link) are misaligned with the main content column of the theme.

This is caused by width: calc( 100% - 4rem ) being applied to both those elements and to the wrapping <div class="section-inner"> element.

Steps to reproduce:

1. View a single post/page when tags, edit link or the author bio is visible.
2. Resize the browser to a screen size thinner than 660px (most noticeable on mobile screen sizes).

Suggested solution:
The author bio, edit link and tags are wrapped in a <div class="section-inner"> element. Adding the thin class to that element will constrain it to the same 580px max width as the entry content, which means that the width and max-width properties can be removed from the .author-bio and .post-meta-wrapper elements.

[nielslange]

@Anlino Feel free to test this patch. Removing max-width and width from .author-bio and .post-meta-wrapper was not possible, as these styles are applied above. Therefore, I had to set max-width: 580px; and width: 100%;. That said, the fix works as expected on my end. 😁

@SergeyBiryukov Is there any way to show the screenshots a smaller, once uploaded, or is the only way to combine before and after screenshot into one image, to avoid that this issue looks like a picture book? I wasn't aware they would appear that big and on my end they literally fill the entire screen height. 🤭

[SergeyBiryukov]

Replying to nielslange:

Is there any way to show the screenshots a smaller, once uploaded, or is the only way to combine before and after screenshot into one image, to avoid that this issue looks like a picture book?

Yes, combining them into one image would currently be the only way to display them smaller. I wouldn't worry about it too much though, it's not uncommon for UI-focused tickets to have large screenshots :)

[nielslange]

Replying to SergeyBiryukov:

Yes, combining them into one image would currently be the only way to display them smaller. I wouldn't worry about it too much though, it's not uncommon for UI-focused tickets to have large screenshots :)

Thanks for your quick reply, @SergeyBiryukov! I'll do that in the future, as I believe it helps to see before and after next to each other.

Different topic, could you make me owner of this issue as I'm happy to follow though on this topic.

[Anlino]

Hi @nielslange! Thanks for taking a look at this, and thanks for the congrats :)

You should be able to fix this by changing the width property of both .author-bio and .post-meta-wrapper to 100% (line 2430 and 2594, respectively). That way, we don't need to add an additional media query, saving us a bit of code.

[SergeyBiryukov]

Replying to nielslange:

Different topic, could you make me owner of this issue as I'm happy to follow though on this topic.

Added you to the Bug Gardener group, you can now assign tickets to yourself as needed :)

[nielslange]

Replying to SergeyBiryukov:

Added you to the Bug Gardener group, you can now assign tickets to yourself as needed :)

Thanks, @SergeyBiryukov! 🙏

[nielslange]

You should be able to fix this by changing the width property of both .author-bio and .post-meta-wrapper to 100% (line 2430 and 2594, respectively). That way, we don't need to add an additional media query, saving us a bit of code.

@Anlino As suggested, I removed max-width: 580px; and both the author bio and bottom post meta are still behaving as expected when the device width is smaller than 660px.

[Anlino]

@nielslange Sorry, I was a bit unclear in my comment. You can remove the entire code block you've added in the 48619-1.diff, if you change the width properties at line 2594 and line 2430 to 100% :) Saves us a media query and a bit of code.

[nielslange]

@nielslange Sorry, I was a bit unclear in my comment. You can remove the entire code block you've added in the 48619-1.diff, if you change the width properties at line 2594 and line 2430 to 100% :) Saves us a media query and a bit of code.

Nah, all good, @Anlino! 😀 I created another patch. It should be fine now. 😜

[Anlino]

Perfect, verified as working on my local :)

[nielslange]

Perfect, verified as working on my local :)

Great to hear, @Anlino!

@SergeyBiryukov What would be the next steps in this case? Shall I close this issue as fixed and give Anders and me props? 🤔

[ianbelanger]

@nielslange this needs to be committed before it is closed and the props will be given at the time of the commit. You do not need to do anything further. Thanks for the fix!

[SergeyBiryukov]

In 46762:

Twenty Twenty: Correctly align the author bio and bottom post meta on single posts on mobile.

Props nielslange, Anlino.
Fixes #48619.

[SergeyBiryukov]

Reopening for 5.3.1.

[SergeyBiryukov]

In 46767:

Twenty Twenty: Correctly align the author bio and bottom post meta on single posts on mobile.

Props nielslange, Anlino.
Merges [46762] to the 5.3 branch.
Fixes #48619.