0

Is there a way of knowing the media query width settings for SP page builder?

Rows and modules can be Hidden on Mobile/Tablet/Desktop using the Responsive tab in options.

I was wondering what widths the media queries are using. Does anyone know the exatd widths?

1

Sp Page builder was built on Bootstrap framework. You can follow the link to learn more about bootstrap layout.

Apart from your ability to hide rows and columns on Mobile/Tablet/Desktop using the Responsive tab in options. You can also define how you want the columns to be resized or rearranged on tablets and mobile.

You should note that we have row options and column options - the column is always a child of the row. It is the column options that enables you to rearrange your columns on tablets and mobile.

Assuming you created a row and added two columns with equal widths of 50% or in bootstrap terms - col-md-6. To access the columns options in order to adjust the width for tablets, look to the top-right of the column, you will see a settings icon, click on the icon and select column options from the drop-down. That brings up a popup window displaying the column options. To achieve the goal of resizing or rearranging your columns, click on the responsive tab and you will see options for tablet and mobile layouts. In the tablet layout select box, you will see options like: col-sm-1, col-sm-2, col-sm-3, col-sm-4, etc., by selecting any of the values for tablet will change the width of the column to a new size on tablets.

E.g. if your columns were: col-sm-6 and col-sm-6 and you change any of them to col-sm-12 in the tablet layout, it becomes 100% i.e fullwidth.

Hope you grasp my points!

Most of my projects are built on bootstrap(T3 framework) and i also use sp page builder and below are the media queries i use to control my layout on different devices outside what sp page builder offers:

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
    /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
    /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
    /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
    /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
    /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
    /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
    /* styles */
}

You can also define custom media queries to target certain mobile devices range by combining the screen widths above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.