Captions break Image fluidity in responsive themes on mobile phones

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 https://www.ads-software.com/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.

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

https://www.ads-software.com/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 https://codex.www.ads-software.com/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