Images in Theme Floating over Text

On my site at HighTechRealm.com, I just added in a couple of 300x250 ad banners however they seem to be causing my post images and post layouts to be thrown off and I wanted to ask if I could have assistance with the CSS.

Thanks very much in advance!

  • Tyler Postle
    • CGO

    Hey Charles,

    Hope you're doing well today!

    Just to be sure, so when you remove the ads, your other images go back to normal?

    Do you mind granting support access? Then I can take a closer look at the CSS with and without the ads, if you don't mind :slight_smile:

    You can grant support access via admin dashboard - WPMU DEV > Support > Support Access > Grant Access.

    Look forward to hearing back!

    Cheers,
    Tyler

  • Tyler Postle
    • CGO

    Hey Charles,

    Thanks for your prompt reply :slight_smile:

    I took a look and after removing the ad widgets, the images were still overlapping, might have been due to something else - either way, I think I have solved it for you.

    I noticed you had a custom stylesheet in your appearance menu, so hope you don't mind but I went ahead and added this code to it:

    img.attachment-kopa-image-size-1.wp-post-image {
    width: 100% !important;
    }

    This seems to have resolved the issue.

    Let us know if you still need any further assistance!

    Cheers,
    Tyler

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, Charles!

    We've just stumbled upon one of the delights of themes that use featured images -- they aren't always consistent, and they don't always work with all image sizes. On your site, the thumbs look fantastic on the main and archive pages, but they all look odd on individual post pages because the featured image for the individual post pages has a different ratio than the thumbnails.

    Trying to work within that gets a little tricky, but we can do it.

    1. Add this to your custom CSS before the code Tyler gave you.

    #main-col {
         width: 66%;
    }

    This is changing how the main column displays. Instead of forcing it into 795px, which is how it was previously set, this makes the width of this column dependent on the screen in which it is displaying.

    2. Replace the code Tyler and I gave you with this:

    .entry-box .entry-thumb, .entry-box .entry-thumb img {
         display: block;
         width: auto;
         height: auto;
         margin: auto;
    }

    This will center the image at it's proper proportions without stretching it in either direction.

    Hope this helps! Take care, and have a great week.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.