Archived topic

Disable section when displayed on mobile

4 replies · Started by Callum on January 25, 2017

Viewing posts 1–5 of 5

January 25, 2017 at 8:53 am #268454

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.

January 25, 2017 at 9:00 am #268461

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.

January 25, 2017 at 10:10 am #268526

You can also use the built in CSS classes:

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

January 27, 2017 at 9:20 am #269865

Hi all,

Thank you very much - Leo your fix worked perfectly!

January 27, 2017 at 9:23 am #269867

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!

This archived topic is closed to new replies.

Start building better websites today.