How to set custom Breakpoints in PRO?

Support
#1

I really like the concept of five breakpoints built into PRO where we can have items on or off depending on @media query.

However, I do not, personally, agree with current settings for EXTRA LARGE (1200 and up), LARGE (980px – 1199px), MEDIUM (768px – 979px) and SMALL (481px – 767px) settings.

I can setup my own CSS @media queries for each CSS class I need, but I am curious where in the code is that one place where I can change breakpoints for EXTRA LARGE, LARGE, MEDIUM and SMALL screens for the entire PRO theme?

If you are interested, with PRO’s out-of-the-box breakpoints most iPads have the same setup in portrait and landscape orientation (should have different ones) and large number of Android tablet devices fall within LARGE breakpoint regardless of orientation. I think breakpoints should be EXTRA LARGE (1201 and up), LARGE (1025px – 1200px), MEDIUM (769px – 1024px), SMALL (481px – 768px) and EXTRA SMALL (480 and below). This setup will accommodate mobile devices better allowing for different setups upon screen rotation.

So, where is that one place I can change breakpoints so they reflect in all the PRO interfaces without me having to write any custom @media queries? Couldn’t we use child theme for that?

Thank you.

1 Like
Preview Size and Layout mismatch issues
Menu Cutoff Issue on Smaller Laptop Screens
#2

Hi There,

Breakpoints are set on the stylesheet. There’s no available settings where we can adjust it.
To achieve that, you need to overwrite current CSS declaration for the following classes:

x-hide-xl x-hide-lg x-hide-md x-hide-sm x-hide-xs

This is the default declaration:

                @media (min-width: 1200px) {
                .x-hide-xl {
                display: none !important;
            }
            }@media (min-width: 980px) and (max-width: 1199px) {
                .x-hide-lg {
                display: none !important;
            }
            }@media (min-width: 768px) and (max-width: 979px) {
                .x-hide-md {
                display: none !important;
            }
            }@media (min-width: 481px) and (max-width: 767px) {
                .x-hide-sm {
                display: none !important;
            }
            }@media (max-width: 480px) {
                .x-hide-xs {
                display: none !important;
            }
            }

Hope this helps.

#5

Hi There,

It would be wise if you write your own media query breakpoints on your child theme’s style.css file. Altering the core breakpoints might cause issue directly or indirectly on the theme functionalities.

Thanks,

#6

Thank you, Friech.

I was hoping for a single point of entry for all the breakpoints in light of the whole idea of “cascading development”. However, you are right. After looking at the default CSS for one of the stacks (Icon) and found over a hundred unique @media query entries overwriting each other. So much for single point of entry :wink: I wish it was cleaner and more organized.

No problem, thought. I’ll go and modify all the CSS classes I need manually.

#7

Glad we could help.

Cheers!

#8

Just stumbled upon this as I was encountering the same issues as @Askeam. Will this be something that we’ll see in future updates? Given that ever more websites are being developed mobile first this would make sense. If not, why not?

Greetz, Ying-Fu

#9

Hi There,

I Will forward your notes to our development team.

Regarding websites being developed for mobile first, I would say they should be well developed for desktop and mobile environments, Pro and X especially with global blocks and our addons like the grid allow you to build extremely interesting cross layouts which function well in any environment without altering the whole theme breakpoint system which follows the standard.

Hope it helps