Hide hero image om mobile and Tablet


Hello guys,

I would like to Hide the hero image from displaying on mobile.
On the desktop version the image is behind the header but on tablet and mobile it’s below the header and taken up a lot of room.
Is there a way of tweaking this for these devices or prehaps having the same effect as on the desktop version, behind the header.

Here is a link to one of the pages in question



You can hide header area on mobile devices with this Custom CSS:

@media only screen and (max-width: 1024px) {
.header-image {
    display: none !important;

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,


Thanks csaba,

This works just fine.



Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,