Home>Support>Media Queries for columns

Media Queries for columns

By ica83, 8 years ago. Last reply by Alex S, 8 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hello,

I’m trying to set some media queries for columns blocks in one page.
Unfortunately when I set

width:100%; float:left;
this doesn’t work.

I don’t want to change the Mobile Width breakpoint (currently on 780px) in the Page Builder as it would apply it throughout the website.
Instead I would like to change the way some blocks display in only one page using media queries.

How can I achieve this?

Thanks

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Ica83,

    On tablet/mobile devices, we alter the width/float by applying CSS to (for example) a selector like this: #pg-3800-1 .panel-grid-cell Due to the usage of the id, you’ll need to either be more specific or !important your properties.

    An example of column CSS we apply is:

    @media (max-width: 780px) {
    #pg-3800-0 .panel-grid-cell, #pg-3800-1 .panel-grid-cell, #pg-3800-2 .panel-grid-cell {
        float: none;
        width: auto;
    }
}

    This CSS is used on mobiles.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More