restrict container width without changing mobile layout

  • Resolved Allen Farmelo

    (@allen-farmelo)


    9 years, 5 months ago

    Hi,

    I want to restrict my container width, but when I do the mobile version also changes.

    Specifically, setting the container width makes the mobile app use the same width, which is no good for mobile phones.

    Also, when I set a padding on the right hand so there’s space between the body text and the sidebar, it does that on the phone too.

    I’m using these codes:

    .container {
    width: 1024px;
    }

    .main.col-lg-9 {
    padding-right: 100px;
    }

    Is there a way to tell the main version what to do without affecting what happens on the mobile version?

    website is: http://www.pinknoisemag.com

    Thanks!
    Allen

Viewing 4 replies - 1 through 4 (of 4 total)
  • hannah

    (@hannahritner)

    9 years, 5 months ago

    Hey, you can use media queries. So you could try adding this:

    @media (min-width: 1024px) {
.container {
width: 1024px;
}
.main.col-lg-9 {
padding-right: 100px;
}
}

    Hannah

    Thread Starter Allen Farmelo

    (@allen-farmelo)

    9 years, 5 months ago

    Hannah, thank you! That’s working.

    One quirk – this now puts the date square back into the mobile posts, as well as the posting date at the top, which I had eliminated with this code:

    .post .subhead,
    .postdate {
    display: none;
    }

    Thoughts?

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    9 years, 5 months ago

    See how hannahs css has two closing brackets at the end… one for the css one for the media query. Yours doesn’t have the two that are needed.

    Kadence Themes

    Thread Starter Allen Farmelo

    (@allen-farmelo)

    9 years, 5 months ago

    Thank you so much! Works perfectly!

    Allen

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘restrict container width without changing mobile layout’ is closed to new replies.