New theme – images don't respect column boundaries

  • Resolved JMunce

    (@jmunce)


    8 years, 10 months ago

    Just coding a new theme, and the images in the posts don’t seem to respect the widths of the column. The images are all already set with:

    img {
max-width:100%; height:auto; display:inline;
}

    in the style.css. I tried applying this to the column itself as well, but no change.

    The images do respect column widths (resize to 100% width) when using other themes.

    I notice that each image has a div around it, though, like this:

    <div id="attachment_12315" style="width: 500px" class="wp-caption aligncenter">

    Because each of these divs for each image has a different #id, I don’t know how to code them all to 100% width max.

    Here’s a screenshot of the image not respecting the column width:

    View post on imgur.com

    <script async src=”//s.imgur.com/min/embed.js” charset=”utf-8″></script>

    Any ideas what’s going on here?

    Thanks
    JM

Viewing 6 replies - 1 through 6 (of 6 total)

  • Try this:

    .wp-caption img {
width: auto;
max-width: 100%;
height: auto;
display: block;
}

    A link to your site would be helpful to see the actual problem.

    Thread Starter JMunce

    (@jmunce)

    Unfortunately, it didn’t work.

    The theme is in development on a “theme testdrive”, so there isn’t really a way to show it.

    Thread Starter JMunce

    (@jmunce)

    Got it. It was 

    .wp-caption {
width: auto;
max-width: 100%;
height: auto; display:inline;
}

    Thanks for the idea. I just modified it.

    Odd that it’s inline only, but if it worked, great!
    You can mark this resolved.

    Thread Starter JMunce

    (@jmunce)

    Well, it works with block as well. It was the target that I adjusted.

    Still have an issue with it though. The small images that regularly are aligned left or right for some reason don’t “embed” in the text — instead, they are “to the left” but the text just displays underneath them.

    Thread Starter JMunce

    (@jmunce)

    Resolved, people can add this:

    img.alignright { float: right; margin: 0 0 1em 1em; }
    img.alignleft { float: left; margin: 0 1em 1em 0; }
    img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
    .alignright { float: right; }
    .alignleft { float: left; }
    .aligncenter { display: block; margin-left: auto; margin-right: auto; }

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘New theme – images don't respect column boundaries’ is closed to new replies.

Tags