News Theme: Non-responsive image if captioned

Community Forums Forums Design Tips and Tricks News Theme: Non-responsive image if captioned

This topic is: resolved

Tagged: , ,

This topic contains 6 replies, has 3 voices, and was last updated by  fotodog13 7 months, 4 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #47772

    chrisman
    Participant
    Post count: 12

    I am using the News Theme on my site and have found a problem with the responsiveness of in-post images.

    Whenever I have an image in a post, WITHOUT a caption, it will resize correctly;

    http://www.behindthemixer.com/content/cleaning-up-music-mix

    Whenever I have an image in a post, WITH a caption, it will not resize correctly;

    http://www.behindthemixer.com/content/how-to-eq-vocals-in-six-easy-steps

    Not sure what to do as I have a lot of mobile readers and the image captions are usually necessary.

    http://www.behindthemixer.com
    #47781

    pxforti
    Participant
    Post count: 67

    the image attachment has a width in it. If you can remove that in the html, it will fix the problem:

    <div id="attachment_4098" class="wp-caption alignright" style="width: 330px"><img class="size-full wp-image-4098 " alt="EQ vocals starting with the microphone." src="http://www.behindthemixer.com/wp-content/uploads/2013/06/eq_vocals_six_steps.jpg" width="320" height="214" />

    eg, remove: style=”width: 330px”


    writeNowDesign
    WordPress and Ecommerce Website Design

    • This reply was modified 9 months, 3 weeks ago by  pxforti.
    • This reply was modified 9 months, 3 weeks ago by  pxforti.
    #47788

    chrisman
    Participant
    Post count: 12

    Ok, that works but that’s weird as both posts (their images) have height and width defined. Maybe there is a standard size like 300×200 and has special css references. I’ll have to look into that but that’s for giving me some direction.

    #47790

    pxforti
    Participant
    Post count: 67

    I think it’s because the width is added as a style that the css can’t overrule it. I tried to set the max-width for wp-caption and img, but it doesn’t work.


    writeNowDesign
    WordPress and Ecommerce Website Design

    #47792

    chrisman
    Participant
    Post count: 12

    I found this, now I’ll try implementing it…

    “Not sure if this applies to all themes or not but this is the css I used to get images with captions (and the captions themselves to resize properly…”

    .wp-caption,
    .wp-caption-text {
    max-width: 97.5%;
    height: auto;
    width: auto9; /* ie8 */
    }

    #47817

    chrisman
    Participant
    Post count: 12

    That bit of CSS fixed it!

    #58299

    fotodog13
    Participant
    Post count: 49

    chrisman- thanks for posting this- worked like a charm for me.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘News Theme: Non-responsive image if captioned’ is closed to new replies.