Image not responsive

Hey!

There are two ways you can fix this.

If you are comfortable editing the theme styles (style.css I assume, although I am not familiar with this particular theme), you can add the following code to make sure that all images will never be larger than the width of the browser:

img {max-width: 100%;}

Or, maybe easier: Go to the page editor, change it from Visual to Text. Find the image and add style="max-width:100%" right before the ending “>”.

Hi, I tried to reproduce this on my test site using Bouquet, and could not. In comparing the generated HTML between yours and mine, I see a key missing part in the code.

Mine has this as the class in the HTML class="aligncenter size-full wp-image-XXX" whereas yours has this: class="wp-image-46 aligncenter"

Note the missing size-full class? I would suggest editing that post, delete that image and then insert it again making sure that you select “full-size” for the size and see if that doesn’t clear up the issue.

@apexbee, is your Bouquet up to date? The current version is 1.2.2. That is what I’ve tested on my site.

I see you are using Jetpack for your CSS changes, and I see you have a lot in there. Did you copy/paste the entire stylesheet in there? Also, in the Edit CSS section, did you change Mode: Add-on to Mode: Replace ?

Add the following to your custom CSS, since it isn’t in there and doesn’t seem to be getting applied from the original stylesheet.

img.size-auto, img.size-full, img.size-large, img.size-medium, .format-gallery .attachment-large, .entry-attachment img, .widget-area img, .post-format-content img {
    height: auto;
    max-width: 100%;
}

Thank you both for these solutions! I do have the current version of Bouquet and I did not paste the entire style sheet into the Edit CSS section.

The image in question was fixed with CSSgirl’s suggestion of adding ‘ style=”max-width:100%” ‘ to the image. I also added sacredpath’s suggestion of custom CSS for the style sheet.

Thanks again!

You are welcome.