Solved SP Page Builder

Breakpoints

Asked by Hans Peter Betzler 2 years ago Last activity 2 years ago

Hi Team,
just a development question:
What would be the correct way to get the brakepoints on Landscape, Tablet, Mobile correct without having to add media queries.
In the backend they show up as being perfect...
But when for example viewed in chromes responsive viewer they are not correct,
So until today I use @media, to correct for example the widths 360, 375, 383, 411, 414 and so on.

Making my development slow down. Please what should I do for not having to write additional media queries?

Kind regards
Hans Peter Betzler

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

2 years ago

Thx @Pavel.

Indeed, for screens 360, 375, 383, 414, 440, 460 or 480px - you still have to use custom @media

Sometime ago checked other Page Builders also for WP, and none of them has 10+ Breakpoints, in general 4-5 is global standard. Unfortunately, current amount of resolution in phones/tablets requires compromises.

4 more replies

Pavel

2 years ago

Hi. Sp PB uses Bootstrap breakpoints

/*Breackpoints*/
/* Desktop First */
@media (max-width: 1399.98px) {}
@media (max-width: 1199.98px) {}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {}
/* Mobile First */
@media (min-width: 576px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

If you need tuning for screens width less than 576 px, then only custom media. But an experienced webmaster makes a layout so that from 576 px to 320 px it is not required to make changes. On this width, the layout is rubber and it is very difficult to control this through the media. It is better to work on the design so that the use of media is not required.

Hans Peter Betzler Asked this

2 years ago

Hi Pavel, Hi Paul,
thank you to you!

Now I know for sure, that I have to continue with @media if my design ist not perfect for mobile.

Altough I still wonder why the backend shows to be perfect under the sppagebilder breakpoints but these are not correct when viewed in another responsive viewer...

Kind regards
Hans Peter Betzler

Pavel

2 years ago

Altough I still wonder why the backend shows to be perfect under the sppagebilder breakpoints but these are not correct when viewed in another responsive viewer...

Because in SP Page Builder you see only static width view. But as I wrote above from 576 px > it is rubber. And you can see this behavior only by reducing the width of the browser in real time.

Hans Peter Betzler Asked this

2 years ago · edited

Hi Pavel,
thank you for your explanation, which of course makes a lot of sence!

I love your description of "it is rubber" it makes me smile :)

Kind Regards
Hans Peter Betzler