Opened 5 years ago
Closed 5 years 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: |
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:
- View a single post/page when tags, edit link or the author bio is visible.
- 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)
Change History (21)
#3
in reply to:
↑ 2
;
follow-up:
↓ 4
@
5 years ago
Replying to nielslange:
Is there any way to show the screenshots a smaller, once uploaded, or is the only way to combine
before
andafter
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:
↓ 6
@
5 years 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:
↓ 8
@
5 years 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:
↓ 7
@
5 years 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
@
5 years 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! 🙏
#8
in reply to:
↑ 5
@
5 years ago
You should be able to fix this by changing the
width
property of both.author-bio
and.post-meta-wrapper
to100%
(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:
↓ 10
@
5 years 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.
#10
in reply to:
↑ 9
@
5 years 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 to100%
:) Saves us a media query and a bit of code.
Nah, all good, @Anlino! 😀 I created another patch. It should be fine now. 😜
#12
in reply to:
↑ 11
@
5 years 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
@
5 years 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!
@Anlino Feel free to test this patch. Removing
max-width
andwidth
from.author-bio
and.post-meta-wrapper
was not possible, as these styles are applied above. Therefore, I had to setmax-width: 580px;
andwidth: 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
andafter
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! 🎉