Mobile site width

  • Resolved thestylistquo

    (@thestylistquo)


    11 years, 4 months ago

    I’ve tried and tried to fix this but to no avail. I’m running a child theme of Twenty Twelve, which I recently reinstalled and added custom CSS to from the ground up. I tried to make sure to avoid using set-values for changing the body and sidebar width, as I’d read that can interfere with the responsiveness.

    My mobile site is way too narrow, and it’s difficult to read my posts/recipes on a smartphone. What can I do to fix this?

    The URL is https://thestylistquo.com. Thanks.

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

  • This seems to be the problem:

    .site-content {
    width: 66%;
}

    Thread Starter thestylistquo

    (@thestylistquo)

    How do I modify the width of the desktop site whilst allowing the site to remain responsive?

    Twentytwelve is coded “mobile-first” so if you want CSS styles to only affect the desktop version, use media queries – you can look on about line 1350 in the parent style.css file for how those are set up. The first section applies to bigger browser with this – I added your code here as an example – though presumably you have the sidebar to put there too?

    /* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

    .site-content {
         width: 66%;
    }

}

    Thread Starter thestylistquo

    (@thestylistquo)

    Thank you! Perfect explanation and perfect solution. My mobile experience is infinitely improved now. Now to figure out Doubleclick for Publishers.. sigh. Thanks again!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile site width’ is closed to new replies.