WordPress.org

Ready to get started?Download WordPress

Forums

Width: 100% not working in portrait on Featured Image in Custom Theme (7 posts)

  1. sanjaypoyzer
    Member
    Posted 1 year ago #

    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.

  2. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    This will be enough:

    img {
        -ms-interpolation-mode: bicubic;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
    }
  3. sanjaypoyzer
    Member
    Posted 1 year ago #

    Just tried this. No change, max-width still being ignored. :(

  4. crtnycrk
    Member
    Posted 4 months ago #

    Oh come on! Don't leave me hanging!

  5. Emil Uzelac
    Theme Review Admin
    Posted 4 months ago #

    @crtnycrk you will find more answers on http://cyberchimps.com/forum/free/

  6. WPyogi
    Volunteer Moderator
    Posted 4 months ago #

    10 months later?? Hi Emil - nice to see you around these parts :)!

  7. Emil Uzelac
    Theme Review Admin
    Posted 4 months ago #

    hehe, you know me :)

Topic Closed

This topic has been closed to new replies.

About this Topic