WordPress.org

Support

Support » Themes and Templates » Width: 100% not working in portrait on Featured Image in Custom Theme

Width: 100% not working in portrait on Featured Image in Custom Theme

  • So I’m trying to create a fullscreen, mobile friendly theme which displays Featured Images of posts as big as they can be with no cropping. This means in landscape displaying them with height:100%; width:auto;, but in portrait displaying them width:100%; height:auto. (As in many iOS apps.)

    Trouble is, I’m having a real bugger of a time getting this to work in WordPress. When I developed the theme as a static HTML test site, it all worked completely fine. But for some reason, when I converted the site to a theme, it started ignoring the width:100% in portrait.

    I know it’s not the media query itself that is broken/being ignored, because the nav menu which is within the same portrait media query works fine.

    Initially I thought WordPress’ inline Image sizes had overridden my responsive ones (which would make sense, cascade-wise) but that doesn’t seem to be the case as the image displays fine with height:100% in landscape viewports. In portrait, it seems to be listening to the height:auto command.

    It’s literally just the width: 100%; command that is being ignored.

    I’ve also added in max-width: 100% just for good measure, and tried it with !important in various places. No effect.

    Here’s the code so you can see it’s not a silly missing semicolon.

    #content img {
    width:100%;
    max-width:100% !important;
    height:auto;
    }

    I have also validated my CSS and nothing seems to be wrong there.

    Please, oh please, somebody save me from my portrait problem.

Viewing 6 replies - 1 through 6 (of 6 total)
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Width: 100% not working in portrait on Featured Image in Custom Theme’ is closed to new replies.