WordPress.org

Ready to get started?Download WordPress

Forums

Captions break Image fluidity in responsive themes on mobile phones (13 posts)

  1. baggi-t
    Member
    Posted 1 year ago #

    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

  2. psheld
    Member
    Posted 1 year ago #

    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.

  3. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

  4. Marco Chiesi
    Member
    Posted 1 year ago #

    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).

  5. climber-guy
    Member
    Posted 11 months ago #

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

  6. Marco Chiesi
    Member
    Posted 11 months ago #

    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.

  7. climber-guy
    Member
    Posted 11 months ago #

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    @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

  9. freeazy
    Member
    Posted 10 months ago #

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

    Thanks.

  10. Ashkar
    Member
    Posted 10 months ago #

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

  11. Josh.biz
    Member
    Posted 9 months ago #

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

  12. Kieran McCarthy
    Member
    Posted 9 months ago #

    Thank you Marco.

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

    Worked for me.

  13. Emil Uzelac
    Theme Review Admin
    Posted 9 months ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic