[Resolved] Disable section when displayed on mobile

[Callum]

Hello!

I have a website that is built predominently with sections which displays well on desktop. The issue we have is when displayed on mobile the height of the section images (which are used as a header below the menu) do not resize leaving the layout looking out of proportion.

Is there a was (with custom CSS or otherwise) that we would be able to either have the section disable when displayed below a certian size?

Any help would be much appriciated.

Page link: http://www.musicangelsocialpower.com/music-angel-foundation-about/

Thanks,

MA Team.

[Leo]

Hi Callum,

With the new GP Premium 1.2.93, you can assign a Custom ID to each section. Then you can hide them in mobile with this CSS:

@media (max-width: 768px) {
    #MYCustomID {
        display: none;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know.

[Tom]

You can also use the built in CSS classes:

hide-on-desktop
hide-on-tablet
hide-on-mobile

[Callum]

Hi all,

Thank you very much – Leo your fix worked perfectly!

[Leo]

You’re welcome 🙂

Thought I’d mention that Tom’s solution is probably easier than mine though…
You just have to enter those CSS classes in the Custom Classes field inside Section Settings:
https://docs.generatepress.com/article/sections-overview/#opening-the-section-settings

But they do the same thing!

[Author]

Posts