Breakpoints
Hans Peter Betzler
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
Paul Frankowski
Accepted AnswerThx @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.
Pavel
Accepted AnswerHi. 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
Accepted AnswerHi 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
Accepted AnswerAltough 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.