Hero section too big in mobile view

Report · Oct 01, 2022

Hi All,

I'm also having some issues with my website's hero section, it's appearing too big on mobile.

How to fix that?

Moderator Note: Moved the topic to a new discussion

Report · Oct 02, 2022

I would move the banner image to the Header element where it can be better controlled than in the Main element. Also change the image to foreground image. That way you can set the size of the image to the size of the screen. You may find that you may want a different sized image all together, in which case you could use srcset. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Oct 03, 2022

The actual issue is the max-height:inherit you have on the divs around the logo

.site-header-item

.site-branding
And how you got flex on the parents for that.

Then you have a min height on :

.site-main-header-inner-wrap.

Just open up your console and inspect the elements. You can see where all the height comes from etc. This is just a few of the things. There ARE A LOT OF DIV'S! which are probably from it being made originally in MUSE?

It is not great you have a whole seperate header as you do not need that, pure CSS and media quries can sort the existing header out but that is OK.
The thing I see is a lot of CSS that is not needed on lots of elements and all contributing in your issue (and others).