WordPress Twenty Twenty-One Theme Cover Block Mobile Issue
-
Hi all. I’m currently designing a site using the Twenty Twenty-One theme, and I have a cover block on my homepage that displays just fine on desktop but isn’t responsive on mobile. In fact, it doesn’t even display the image at all. Instead it’s just a black background behind my overlay text—which is also unresponsive (the alignment is off). Is there a fix for this?
-
Could you please tell us the address of the site you need help with? Once we know that we can point you in the right direction for support.
-
-
Hi,
Indeed a background image is not there.
The link to image is not showing image neither: https://dnguyenportfolio.files.wordpress.com/2021/05/dsc0509.jpg
Have you tried to reset it in cover block again or upload a new one? Does the image appear in Media gallery?text—which is also unresponsive (the alignment is off). Is there a fix for this?
Do you mean this text alignment on the right side off as I have showed below?
Am afraid the only way to fix this is to reduce the text font size because your word COMMUNICATIONS is simply too long.
Or I have found another way- your text in the Cover Block is inside of Heading block. You can press enter after the last word and add a paragraph block (inside of Cover Block) with your text, which gives needed responsiveness but cuts the words like this:
Also I have to mention, if you have Premium, Business or eCommerce plan you can use custom CSS to change the font size depending on the screen size. That could be either font size “tied up” to viewport width like
font-size:10vw; or predefined text size “steps” using@media. If you do have needed plans, you can also use Live chat to solve these problems with professional Happiness Engineers.Would be happy to hear from you, if that helped?
-
Thanks so much for your help. I guess fixing the cover just took another upload of the same photo. Your advice helped me correct the heading as well!
Strangely, a separate issue just came up in that I can no longer see the hamburger menu icon on mobile. I can still access the menu by tapping the area near the “Create your website with WordPress.com” notification bar, but there’s no sign of the icon. Is that the result of something I changed?
-
Strangely, a separate issue just came up in that I can no longer see the hamburger menu icon on mobile. I can still access the menu by tapping the area near the “Create your website with WordPress.com” notification bar, but there’s no sign of the icon.
That is strange, I have figured out that hamburger menu hovers too high (under the marketing-bar-link), because its position is not being set properly on mobile devices:
.primary-navigation { top: var(--global--admin-bar--height); }That is because this one is missing on your page:
@media only screen and (max-width: 782px) .admin-bar { --global--admin-bar--height: 46px; }But that the result, not the problem. Could you please recall what have you amend last day before Menu hided? If not, we will ask staff for help.
Looking forward to hear from you soon.
-
Hi there,
The WordPress.com banner blocking the menu icon on mobile is a bug. Our developers are already aware of it, though I’m not able to give you a timeline on when it will be fixed.
A possible workaround is to add a site logo in the Customizer. The logo appears at the top, pushing the menu button down on mobile, so it’s not covered by the banner any more.
-
Thank you, mansimurasov and kookieh. I’ll try the site logo workaround and see what works best while the developers do their thing. I appreciate your help.
-
Hi there,
I wanted to let you know this bug has now been fixed. If we can help with anything else, you can start a new support request at https://wordpress.com/help/contact
- The topic ‘WordPress Twenty Twenty-One Theme Cover Block Mobile Issue’ is closed to new replies.
WordPress.com Forums 
