WordPress.org

Support

Support » How-To and Troubleshooting » Captions break Image fluidity in responsive themes on mobile phones

Captions break Image fluidity in responsive themes on mobile phones

  • I’m working with images in WordPress responsive themes for access on mobile phones. I find that if an image has no caption it works fine, but if it has a caption, it does not shrink to fit on my mobile (cell) phone (Nokia C5-00). I guess the problem is the width and height values WP puts into the caption code. If i strip this out or change it to percent values, it either breaks or shrinks the image. Please see my test demo at timbaggaley.co.uk/test.

    Note the image with the caption will scale in a browser window on a computer, but does not fit on my mobile. Does anyone know how to fix this?

    Thanks
    Tim, London

Viewing 12 replies - 1 through 12 (of 12 total)
  • I’m having exactly the same issue with my new responsive theme. I’ve asked for guidance from the theme creator so will report back if and when I have any news.

    Hey guys, I would check this with StudioPress support actually, please note that WPORG support is available for Themes hosted in http://wordpress.org/extend/themes/ directory 🙂

    Thanks,
    Emil

    Hi there,
    I had the same problem and I fixed it with the following css rule which overrides the inline rule inserted by the WP caption shortcode:

    .wp-caption {
    	max-width: 96% !important;
    	width: auto !important;
    }

    An alternate solution is to filter the WP caption shortcode output as suggested by this snippet (though the code reported there needs a few modifications in order to work properly).

    I’m having the same problem.
    Just tried your code but no joy.
    Any other suggestions?

    You may try with the following code snippet I used (it is a slightly modified version of the one linked above).

    add_filter( 'img_caption_shortcode', 'bs_responsive_img_caption_filter', 10, 3 );
    function bs_responsive_img_caption_filter( $val, $attr, $content = null ) {
    	extract( shortcode_atts( array(
    		'id' => '',
    		'align' => '',
    		'width' => '',
    		'caption' => ''
    		), $attr
    	) );
    
    	if ( 1 > (int) $width || empty( $caption ) )
    		return $val;
    
    	$new_caption = sprintf( '<div id="%1$s" class="wp-caption %2$s" style="max-width:100%% !important;height:auto;width:auto;">%4$s<p class="wp-caption-text">%5$s</p></div>',
    		esc_attr( $id ),
    		esc_attr( $align ),
    		'', //( 10 + (int) $width ),
    		do_shortcode( $content ),
    		$caption
    	);
    	return $new_caption;
    }

    If still it doesn’t work, post a link to your site.

    Yeah, still no go!
    I’ve taken that bit of code out

    It is the thumbnails at the bottom of the home page that cause th most problems on the mobile. The text doesn’t seem to stay within the gallery image area.

    WPyogi

    @wpyogi

    Forum Moderator

    @climber-guy – CSS is quite theme/site specific, so posting in the theme forum here may be more relevant:

    http://wordpress.org/support/theme/pinboard

    I have same problem and Marco’s trick works for me.

    Thanks.

    Me too faced same problem.. but Marco Chiesi’s trick worked like a charm for me.. Thank you Macro..

    Thanks Marco. Your code worked 100% for me also!

    Thank you Marco.

    .wp-caption {
    	max-width: 96% !important;
    	width: auto !important;
    }

    Worked for me.

    Wrote, re-wrote over year ago http://codex.wordpress.org/CSS#WordPress_Generated_Classes where from you can find the complete details about it. Also no need for ugly !important declaration.

    .wp-caption {
        max-width: 96%; /* Image does not overflow the content area */
    }

    Emil

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Captions break Image fluidity in responsive themes on mobile phones’ is closed to new replies.
Skip to toolbar