Archived topic
Page hero block for mobile
9 replies · Started by Bernhard on November 2, 2021
Hello,
as my background image in the page hero (featured image) is quite heavy, I want to have a low weight image for mobile.
I've now created different page hero blocks for desktop and mobile and filter with wp_is_mobile().
The problem I have is that I'm not able to figure out the right settings to avoid the white spaces above and below the image on mobile. The desktop version seems to work fine. What am I doing wrong?
On the live site I have Ezoic and it puts Ads above the image and the page title. This did not happen when I used the old page hero element.
Hi Bernhard,
The Block element - Page hero's container block has a margin-top on it on mobile (10px).
As for the bottom space, it's caused by an empty paragraph block below your main Container block. You can check it when you open the list view of blocks on the block editor. :D
OK, thank you :)
No problem. :D
Hello,
I have still a problem with Ezoic. It still covers sometimes the page hero block on mobile and moves the text in the container, that shall be centered, to the left. Screenshot
Is there something missing on my site or a configuration problem in Ezoic?
Hi Bernhard,
I don't see the same issue that in your screenshot.
Does it happen in certain conditions? Let me know :)
HI Ying,
it seems to be random. Actually the problem is only on the homepage where I implemented different page hero blocks for desktop and mobile and it happens only in the mobile view. Probably you will see it when changing the language. When the text in the container appears on the left, after a while an advertisement is loaded.
I tried on 2 devices, switched languages several times, still don't see the issue.
I inspected the code, the issue should not happen according to the current HTML structure.
Sorry can't help without seeing the issue. Keep us updated if there's a way to replicate the issue on our end.
Hi Ying,
I'm happy you confirm that the html structure is ok. I will then try to solve the issue with Ezoic.
Thank you for your help :)
You are welcome! Hope the issue can be resolved soon :)
