www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jan 2013
    Posts
    2

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

    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.

    And here's the HTML

    <div id="content">
    <div title="Click to flip" class="sponsor">

    <div class="sponsorFlip">
    <?php
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail();
    }
    ?>

    </div>

    <div class="sponsorData" style="display:none">
    <?php
    if( class_exists( 'kdMultipleFeaturedImages' ) ) {
    kd_mfi_the_featured_image( 'featured-image-2', 'post' );
    }
    ?>
    </div>

    </div>
    </div><!-- End div #content -->


    Any help on this, very much appreciated! Pulling hair out over this one.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    743
    Please use some form of a code tag when pasting code on the forums.

    When trying to debug or troubleshoot CSS related issues generally my approach is to open the page is Chrome and inspect the element in question. Try viewing the CSS for the image inside of the #content div and seeing if it properly inherits the '#content image' stylings or not. Sometimes (especially when dealing with CMS-based templates/sites) there can be conflicting code that either overwrites or prevents your own custom stylings from taking place. These sorts of things can be easily spotted when using the inspector in a browser such as Chrome.

    And just to make sure I mention this, whether you already knew or not, you should be able to 'simulate' the mobile version of the site by shrinking your browser window to the appropriate size to initiate the media query (unless you've coded some bizarre media query that isn't relying on min/max width values for screen).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jan 2013
    Posts
    2
    Thanks for your reply.

    I have viewed the outputted code. It seems the sizes that Wordpress is assigning to the image are overriding the sizes I am specifying in the CSS. Is there any way at all to override this? I am using the !important tag already and I don't understand why that is not working.

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    743
    I've run in to similar issues working with CMS in the past and the best way to resolve it is to view which CSS rules are being applied to your image element and then look for any !important tags. Obviously not only is your CSS rule being overwritten but the Wordpress template would have to be using an !important tag of its own to make sure it overwrites any other CSS rules.

    Just using the Element Inspector in a browser like Chrome to view all CSS rules for your image you should be able to see the CSS rules Wordpress is using for images as well as the file name from which these rules are found. You'll have to be careful though as editing the Wordpress CSS may affect other areas of your site, but I would start by removing any !important tags from the CSS rules being applied to your image element and working up from there.

    Just let me know if this helps or if you need any more information as I'm sure I haven't explained this as well as I should have.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Sep 2012
    Posts
    5
    bro try this
    Code:
    #content img {
    width:100%;
    max-width:none;
    height:auto;
    }

    i think in IE max-width:100% dont work.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles