Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post

    Make Wordpress image caption responsive

    Hi. This webpage contains images inserted by Wordpress. The code used to insert the first image is:

    Code:
    [caption id="attachment_887" align="alignnone" width="604"]
        <a href="http://steven.doig.com.au/files/2013/06/Forest_Legacy_m.jpg">
            <img class="size-large wp-image-887" alt="a Forest Legacy group" src="http://steven.doig.com.au/files/2013/06/Forest_Legacy_m-1024x681.jpg" width="1024" height="681" />
        </a> a Forest Legacy group[/caption]
    This image is controlled by CSS:

    Code:
    #content .wp-caption a img {
    	width: 614px;
    	height: auto;
    }
    I want to make this image responsive. I've inserted the CSS:

    Code:
    @media (max-width:988px) {
    	#content .wp-caption a img {
    		width: 99.03225806%; /* 614/620 */
    		height: auto;
    	}
    }
    However, the DIV.wp-caption remains at 604px, as specified inside the Wordpress post. I've tried specifying this as a percentage (97.41935483%) but Wordpress reinterpreted it as 104px.

    The inline CSS is overriding the CSS I insert into the stylesheet.
    Code:
    <div id="attachment_887" class="wp-caption alignnone" style="width: 614px">
    Any ideas on how I can make the .wp-caption responsive?
    Last edited by SRD75; 07-22-2013 at 05:06 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,311
    Thanks
    11
    Thanked 284 Times in 283 Posts
    Have you tried:
    Code:
    		width: 99.03225806% !important;
    I hate !important, but it's the only solution I can think of.

    Dave

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Fantastic. Thanks Mr Tracknut.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •