full width on mobile only

  • smbha

    (@smbha)


    4 years, 7 months ago

    I’ve researched this and tried a few things but nothing seems to be working.
    1) How to apply the Sinatra full width theme on mobile only?
    2) Would above be possible for specific pages?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter smbha

    (@smbha)

    4 years, 7 months ago

    Update: I figured how to achieve 1). See below. I’m working on 2) now.

    `@media screen and (max-width: 960px) {

    .si-container {
    padding-left: 0px;
    padding-right: 0px;

    }

    }

    Branko

    (@brankoconjic)

    4 years, 7 months ago

    Thanks for sharing the solution. Every page has a unique class ID added to the body element that looks like this page-id-{id}, where {id} is the post ID. Here’s an example.

    You can use that class to make your CSS page specific, for example:

    @media screen and (max-width: 960px) {
    .page-id-148 .si-container {
        padding-left: 0px;
        padding-right: 0px;
    }
}

    148 is just an example, you should replace it with your own page id.

    • This reply was modified 4 years, 7 months ago by Branko.
    • This reply was modified 4 years, 7 months ago by Yui.
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘full width on mobile only’ is closed to new replies.