Archived topic
Block - Site Header Responsiveness
5 replies · Started by Bruce on January 31, 2023
On the site https://laurindabedingfield.com that I am developing, I created a Block Site Header for all pages except Front Page. I did this to create a menu using images and a dynamic header image using the pages featured image.
It works great except that on mobile, I cannot find a way for it to say looking the same as on all other formats. On mobile landscape, it still looks fine, but on portrait, the custom-made menu that I created using images in a grid change from horizontal to vertical and the header image gets cut off.
Any idea how I can keep them horizontal; just smaller?
Hi there,
You can try setting the container width on mobile to 16% (same as the desktop) as opposed to the default value of 100%:
https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-grid-item
https://docs.generateblocks.com/article/responsive-controls/
I can't see how there would be enough room for all the images on a mobile portrait mode though.
That worked perfectly. You were correct that they were too small at 16%, so I increased the size to 32%, so they just wrap into what looks like 2 rows
I still don't understand how I can make the header image reduce in size, so the the full image is visible in the mobile header.
I still don’t understand how I can make the header image reduce in size, so the the full image is visible in the mobile header.
That's because background images aren't responsive by nature.
I believe a static image (with an image block) would work better in your case.
WOW. Blocks are amamzing. That worked perfectly
Thanks
No problem :)