Archived topic
Mobile and Tablet Friendly Hero space problems.
14 replies · Started by Martin on July 25, 2022
Hello.
After 4 hours of battling with spacing and trying to get full-width hero on mobile, desktop and tablets I have had to come here and ask for help.
I created a full width hero that works great on desktop. It's full with and zero space between the main nav / header and the hero section.
Location; Home, after_primary_menu.
If I allow this hero on tablet with the same setting it doesn't appear at all (testing with an iPad Mini 5).
The same hero section on mobile hides the rest of the content so I made one for mobile but couldn't figure out how to get it to display correctly between mobile logo / menu bar and content without any space and full width (I had a space before the hero).
So, within the home page I created a container that is hidden on desktop (visible to mobile and tablets) which is supposed to be full width and tight to the top bar (no space between logo & hamburger and the hero container). This container is hidden on desktop so only visible for mobile and tablets).
Looks fine on a mobile. But, on a tablet, when I rotate to landscape I get white bars at the sides of the container.
As I mentioned, I've been trying many combinations for 4 hours now and my heair has gone on a vacation!
Any thoughts?
Thanks.
Martin
Hi there,
so the main issue and cause of the pain is using the after_primary_menu hook, as that is within the main-navigation container, which is being replaced on smaller devices for the Mobile Header.
Can you change that hook to after_header ?
Hi David
If I use after_header I get the 'hero' section edge to edge on mobile and tablet but now I have a gap (white space) between the navigation and the hero. I've tried loads of CSS to get rid of the gap.
Martin
Another thought:
If I could fill that white space with the blue I would be happy with that as a compromise.
So can you set only the one hero to be displayed using the after_header hook.
Then let me know, and ill take a look at the white space issue.
The hero for desktop is set as after_primary_menu.
The hero for mobile and tablet is set to after_header. It contains the words 'Test for mobile and tablet'.
I have set the desktop hero to after_header now too for you to see the white space.
Thanks.
I have top-margin set to 0 on the container but it keeps showing up with a 30px top margin.
Cached cleared after every edit.
Can you try re-generating the CSS in Dashboard > GenerateBlocks > Settings.
Well that seems to have accepted the 0 in top-margin!
Thanks for your patience David.
Just discovered that the 3 heros, while each should be independent of the others, all pick up the same font sizes even though I have them set differently.
Hero for desktop first headline should be 60px but since changing the same headline in the mobile version of the hero, to 48, the headline in the desktop is also now smaller.
I can't believe I've spent about 7 hours playing around with these hero sections and I'm still not done.
Fixed with a bunch more CSS.
If you copied and pasted the element then you may find the CSS IDs each block is given will have also duplicated. So one will override the other.
Do you need the various device size heroes ?
With the Desktop hero now in the after_header hook, it will display for the screens using the mobile header
I realised that the duplicating meant the IDs were the same so I used CSS as a workaround.
The reason for different heros is so they layout correctly on different size devices (2 columns side by side on desktop but one on top of the other on mobiles).
On reflection, I guess I could put the three variants into a single hero element rather than have 3 different elements.
I'm no expert with the 'design' side of websites.
Sorry for taking your time on something I might have figured out eventually.
All the best.
Martin
No problems - i am glad to hear its working as you need now :)
