Changing image width for individual posts

  • Unknown's avatar
    themabelkwong · Member ·

    Hello,

    I am trying to change the width of the images in my posts. I want the width of each image to be as long as the width of each individual post. I have the CSS upgrade and I’m using the Twenty Eleven theme.

    Below the CSS box, I’ve set the Media Width to 1000px. Then I added this code into the CSS box:

    .entry-content img {
    max-width: 99%;
    }

    I then saved these changes, reinserted the images in my latest post (What Does it Mean To Be Australian?). I also removed the borders around the images with CSS code. Though these images appear bigger than before and bigger compared to the other images in other posts, they don’t stretch to the post’s full width.

    Also, it appears that the images for all of my posts seem to be slightly indented to the right (that’s what my eyes tell me…).

    Is it possible to make the images wider?

    The blog I need help with is http://mabelkwong.com.

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jqubed · Member ·

    I haven’t gone through all the CSS on your page, but I’m guessing there are more places other CSS items are impacting your image width. I even noticed highlighting an image on your “What Does It Mean To Be Australian?” post that the code for it has included style changing the width of the image.
    <div id="attachment_3661" style="width: 1010px" class="wp-caption aligncenter"><a href="http://mabelkwong.com/2015/01/22/what-does-it-mean-to-be-australian/fairy-angel-busker-melbourne-cbd/" rel="attachment wp-att-3661"><img class="size-full wp-image-3661" src="https://themabelkwong.files.wordpress.com/2015/01/img_1319-edit-03-final-blog-rename-resize.jpg?w=1000&h=844" alt="A touch of kindness in Melbourne, Australia | Weekly Photo Challenge: Serenity." height="844" width="1000"></a><p class="wp-caption-text">A touch of kindness in Melbourne, Australia | <a href="https://dailypost.wordpress.com/dp_photo_challenge/serenity/">Weekly Photo Challenge: Serenity</a>.</p></div>
    So there’s styling being added making it 1010 pixels right there in that first DIV element, and when I highlighted that area there appeared to be some padding all around the photo. What happens if you make the width even bigger or change to 100%? I don’t have the CSS upgrade so I can’t play with it myself.
    Also, I don’t think the images are indented any, it’s just that they’re still not as wide as the post. It’s harder to tell on the right side since the text is aligned left so almost none of it goes to the extreme right edge, but it looks like your images are right in the center of the posts.

  • Unknown's avatar
    themabelkwong · Member ·

    Thanks for that, Jqubed. I do have other CSS in the CSS box. I previously made the width of individual posts wider while adjusting the width of the sidebar too.

    If I change the width of the image to 100% or more, say with with this code:

    .entry-content img {
    max-width: 150%;
    }

    the whole image becomes much bigger on the individual post page – that is, the image width extends way past the width of the individual post.

    I haven’t noticed the padding around photo, I thought I removed that with CSS but I will have a look at that again.

  • Unknown's avatar
    themabelkwong · Member ·

    I used this code and it seems to work:

    img.size-full, img.size-large {
    max-width: 103%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: -12px;
    }

    So I will go with that and close the topic shortly.

  • The topic ‘Changing image width for individual posts’ is closed to new replies.