2013 media queries problems

  • Resolved JudahsMom63

    (@judahsmom63)


    9 years, 5 months ago

    First, the background: I’m writing my own theme using 2013 as the base, and I’m writing on localhost so there’s no url. I’m making changes in my child theme style.css, and I’ve been trying to make the website resize automatically, but I can’t. By this I mean that I can see the website clearly in my wider second screen, but in my first screen (my laptop) the website doesn’t conform to the screensize and I get a scrollbar at the bottom. I’ve attempted the following changes in my child theme: changed various widths to auto only to have my content shift to the right; commented out lines of css and to see if they mattered; I’ve added 6 media queries rules but nothing has worked. I even took my child stylesheet out of circulation to see what the parent stylesheet would do, and not only did it mess up my child theme formatting, it also would not adjust to a smaller screen size and it did not give me a scrollbar at the bottom. Ask me whatever questions you like for more information, but please someone help the old grey mare!

    P.S. I’ve seen other, older posts on this topic but they’re two years old and on WP version 3.something.something so only partially helpful.

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

  • So on your larger (second) screen, if you make the browser narrower, do you also get a scroll bar at the bottom? I usually see this when there is some element whose width is set but is hard to see visually. The way I determine which element it is is by adding these two CSS rules:

    body {
   background-color: red;
}
body * {
   background-color: blue;
}

    Then I gradually make the browser width narrower until I see the scroll bar, then scroll to the far right, and usually the element that is too wide will show up as blue over the right margin.

    Thread Starter JudahsMom63

    (@judahsmom63)

    I’ll give that a try and get back to you. Thanks!

    Thread Starter JudahsMom63

    (@judahsmom63)

    @crouchingbruin – I tried that, and my result was that the red band on the left would disappear, but not the one on the right. Suggestions, please?

    And you didn’t see any blue sticking out into the red margin on the right?

    Thread Starter JudahsMom63

    (@judahsmom63)

    Nope, afraid not.

    Sorry, not sure what else to suggest, other than to make sure you don’t have any width properties set to a px value. Large margin values can also push out the width of the page, and those can be hard to detect.

    Thread Starter JudahsMom63

    (@judahsmom63)

    @crouchingbruin – so I went through my parent style.css and copied all of the width: reallyLong; and width: auto; into my child style.css. Then I changed all the copied-over widths to 100% and Eureka! my site is responsive (at least at desktop level.) Once the site is out of localhost I can test mobile devices, but I don’t think I’ll have any more trouble thanks to YOU!!! I really appreciate your help!

    Great, congratulations!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘2013 media queries problems’ is closed to new replies.