WordPress.org

Make WordPress Core

Opened 2 months ago

Closed 8 weeks ago

#48619 closed defect (bug) (fixed)

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

Reported by: Anlino Owned by: nielslange
Milestone: 5.3.1 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-patch commit fixed-major
Focuses: Cc:
PR Number:

Description

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.

Attachments (5)

48619.patch (637 bytes) - added by nielslange 2 months ago.
#48552 - before.png (242.5 KB) - added by nielslange 2 months ago.
#48552 - after.png (240.5 KB) - added by nielslange 2 months ago.
48619-1.diff (591 bytes) - added by nielslange 2 months ago.
48619-2.diff (586 bytes) - added by nielslange 2 months ago.

Download all attachments as: .zip

Change History (21)

#1 @SergeyBiryukov
2 months ago

  • Milestone changed from Awaiting Review to 5.3.1

@nielslange
2 months ago

#2 follow-up: @nielslange
2 months ago

  • Keywords has-patch needs-testing added

@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.

PS: Congratulations on your second Trac issue, @Anlino! 🎉

Last edited 2 months ago by nielslange (previous) (diff)

#3 in reply to: ↑ 2 ; follow-up: @SergeyBiryukov
2 months ago

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 :)

#4 in reply to: ↑ 3 ; follow-up: @nielslange
2 months ago

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.

#5 follow-up: @Anlino
2 months ago

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.

#6 in reply to: ↑ 4 ; follow-up: @SergeyBiryukov
2 months ago

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 :)

#7 in reply to: ↑ 6 @nielslange
2 months ago

  • Owner set to nielslange
  • Status changed from new to assigned

Replying to SergeyBiryukov:

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

Thanks, @SergeyBiryukov! 🙏

@nielslange
2 months ago

#8 in reply to: ↑ 5 @nielslange
2 months ago

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.

#9 follow-up: @Anlino
2 months ago

@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
2 months ago

#10 in reply to: ↑ 9 @nielslange
2 months ago

@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. 😜

#11 follow-up: @Anlino
2 months ago

Perfect, verified as working on my local :)

#12 in reply to: ↑ 11 @nielslange
2 months ago

  • Keywords needs-testing removed

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? 🤔

#13 @ianbelanger
2 months ago

  • Keywords commit added

@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!

#14 @SergeyBiryukov
2 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 46762:

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

Props nielslange, Anlino.
Fixes #48619.

#15 @SergeyBiryukov
2 months ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for 5.3.1.

#16 @SergeyBiryukov
8 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.