WordPress.org

Forums

[resolved] Mobile site width (5 posts)

  1. thestylistquo
    Member
    Posted 1 year 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 http://thestylistquo.com. Thanks.

  2. WPyogi
    Forum Moderator
    Posted 1 year ago #

    This seems to be the problem:

    .site-content {
        width: 66%;
    }
  3. thestylistquo
    Member
    Posted 1 year ago #

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

  4. WPyogi
    Forum Moderator
    Posted 1 year ago #

    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%;
        }
    
    }
  5. thestylistquo
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic