Viewing 5 replies - 1 through 5 (of 5 total)
  • 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 “>”.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    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.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    @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%;
    }

    Thread Starter apexbee

    (@apexbee)

    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!

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    You are welcome.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image not responsive’ is closed to new replies.