WordPress Plugins and Themes

Featured images display on main page

4 Replies ·

  1. I noticed that when I use a horizontal image as the featured image, it shows up as a large image above the post excerpt. If I use a vertical image, a smaller version shows up aligned to the right.

    How can I get a horizontal image to behave like a vertical one? I’m looking to achieve something like this –
    Camper Report Blog

    In my case, I’d like the featured image to show to the right of the excerpt and not the left but that’s the easy part. It would help conserve valuable space on the main page. Right now I’m using vertical images to make sure they’re aligned to the right but that generates a lot of white space under the text.

  2. Justin Tadlock

    You’ll want to use something like the following CSS in your child theme’s style.css. If not using a child theme, you can use the custom CSS feature in the WordPress customizer.

    @media only screen and ( min-width: 700px ) {
    
        .ltr img.horizontal.stargazer-full {
            float:     right;
            max-width: 50%;
            margin:    0 0 1.5rem 1.5rem;
        }
    }
    

    Adjust that 50% to set the maximum width you want the image to be.

  3. Anne Moss

    Thanks! I tried that and adjusted max-width to 250px. Unfortunately, it doesn’t seem to be working?

    This is the site in question:

    VEHQ RV and Pickup Trucks Blog

    The post titled “How to Park an RV on a Hill” has a 250 by 250 square image and it’s showing up above the text.

    The post titled “What Exactly Is a Fifth-Wheel?” has a horizontal image for the featured image and it’s showing above it in the large version.

    The posts under them have vertical images – but I’d like to change that once we get the CSS working.

  4. Justin Tadlock

    Sorry, I used the wrong class name. I kept reading “horizontal” in your post and forgot that the class is actually .landscape.

    Here’s the correct code:

    @media only screen and ( min-width: 700px ) {
    
        .ltr img.landscape.stargazer-full {
            float:     right;
            max-width: 50%;
            margin:    0 0 1.5rem 1.5rem;
        }
    }
    

    Side note to this: “landscape” refers to images wider than they are tall and “portrait” refers to images taller than they are wide.