Home/ Questions/Q 9118265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T05:06:17+00:00

I’m trying to create a fullscreen, mobile friendly theme which displays Featured Images of

  • 0

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 -->

& here’s some screenshots.

enter image description here

enter image description here

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So I’ve basically solved this now in that I’ve got it working how I wanted it to – However I don’t really understand why it now works.

    I’ve deleted the Portrait Media Query so the default setting is portrait, and then left the landscape stuff in there conditionally. Is there something wrong with putting both a portrait and landscape media query in the same document? I can’t seem to find anything about it on the web, and I’m sure I only had this problem when I converted the site to a wordpress template.

    • 0