Twenty Twenty-One: Site branding and navigation overlapping ads on mobile

anuguywp commented 1 year ago

Quick summary

siteheaderads

You will notice in the image that the site logo and menu on mobile is rending in front of the ad at the top of the site. This is because of an absolute positioning that gets added under 481px width

Steps to reproduce

View site on actual mobile device.

What you expected to happen

The site logo and menu should be positioned underneath the ad.

What actually happened

You will notice in the image that the site logo and menu on mobile is rending in front of the ad at the top of the site.

Context

No response

Platform (Simple, Atomic, or both?)

Atomic

Theme-specific issue?

Twenty Twenty-One

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

One

Available workarounds?

Yes, easy to implement

Workaround details

In order to provide the user with a solution, we provided the user with CSS to add to their Additional CSS:

@media only screen and (max-width: 481px) {
    .site-branding {
        position: relative;
    }
    .primary-navigation {
        position: unset;
    }
}

anuguywp commented 1 year ago

5598698-zen

github-actions[bot] commented 1 year ago

Support References

This comment is automatically generated. Please do not edit it.

[ ] 5598698-zen

jamiepalatnik commented 1 year ago

📌 SCRUBBING : RESULT

Tested on AT - Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

I was able to replicate this issue on my test site using the Twenty Twenty-One theme, but in my test the ad was only overlapping with the menu, not the site title.
Screenshot:

Ads on Twenty Twenty-One

From what I understand, issues with ads placement are typically an ads issue and not a themes issue and should be reported internally, but I am triaging this for further review in the themes repo based on this discussion: p1664662824243409-slack-C029FM1EH

📌 ACTIONS

Marked as Triaged for Quality Squad review

Automattic / themes