This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Media Queries for columns

Open 1 reply pluginplugin-siteorigin-csstechnical
ica83
8 years ago · Last reply by Alex S 8 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Alex S Staff 8 years, 11 months ago

    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.

Have a different question or issue?

Start New Thread