TwentyTwelve @media handheld upsets responsive images

  • Hi!

    My @media screen styles show responsive images beautifully. Then I added the @media handheld rule and the images just break the layout (no CSS styles applied to the images at this point). I’ve tried putting img { max-width: 100% } to my @media handheld rules but no luck. How do I know that it’s the images that are the problem? Because when I set all images to { display: none }, everything fits into the phone screen’s width. But when I display images, layout breaks. I’m using a child theme, by the way.

    Suggestions? Anyone? This is killing me!

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

  • Call me old fashion but i’m a pretty big fan of the 3 screen styles when it comes to WordPress: 

    <link rel="stylesheet" type="text/css" href="https://www.example.com/style.css" media="all" />

    <link rel="stylesheet" type="text/css" href="https://www.example.com/print.css" media="print" />

    <link rel="stylesheet" type="text/css" href="https://www.example.com/screen.css" media="screen" />

    Could you paste your @media code please? Are you following the style rules?

    Thread Starter LeopardOnTheLoose

    (@leopardontheloose)

    I’m absolutely sure my @media handheld code works because the other @media handheld styles for header, content, etc are being applied. It’s just the images and I haven’t even applied any styles to them. In fact, I have the same style rules for @media screen and (max-width: 320px) {} and @media handheld and (max-width: 320px) {} and the @media screen shows responsive images but the @media handheld does not. Weird!

    Thread Starter LeopardOnTheLoose

    (@leopardontheloose)

    Still haven’t found a solution. Somebody with a ton of CSS experience should be able to solve this problem in a matter of seconds.

    For CSS help, you may want to ask on a CSS forum like:

    https://csscreator.com

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘TwentyTwelve @media handheld upsets responsive images’ is closed to new replies.