[Resolved] Featured image caption not on one line

[Jordan Levi]

hey, everybody — great theme!

i added the code below in code snippets and it works fine, aside from the captions under featured images breaking into new lines every word or so. is there a way i can tweak the code to fix that?

thanks in advance!

add_filter( ‘post_thumbnail_html’, ‘custom_add_post_thumbnail_caption’,10,5 );

function custom_add_post_thumbnail_caption($html, $post_id, $post_thumbnail_id, $size, $attr) {

if( $html == ” || !is_singular() ) {

return $html;

} else {

$out = ”;

$thumbnail_image = get_posts(array(‘p’ => $post_thumbnail_id, ‘post_type’ => ‘attachment’));

if ($thumbnail_image && isset($thumbnail_image[0])) {

$image = wp_get_attachment_image_src($post_thumbnail_id, $size);

if($thumbnail_image[0]->post_excerpt)
$out .= ‘

‘;

$out .= $html;

if($thumbnail_image[0]->post_excerpt)
$out .= ‘<p class=”wp-caption-text thumb-caption-text”>’.$thumbnail_image[0]->post_excerpt.'</p>

‘;

}

return $out;
}
}

[Fernando]

Hi Jordan,

Try adding this through Appearance > Customize > Additional CSS:

p.wp-caption-text.thumb-caption-text {
    display: flex;
}

p.wp-caption-text.thumb-caption-text a{
    margin: 0 4px;
}

[Jordan Levi]

that worked perfectly, thank you so much! another minor issue, though, sorry:

i added a mailchimp newsletter signup form to the footer and it loks fine on desktop, but on mobile it overflows outside of the container. is there any code i can add to fix that? this is the form’s code:


<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>

<form action="https://github.us1.list-manage.com/subscribe/post?u=25fe5fa5ee4114cf347fd278c&id=1dc98df0e9&f_id=0065c7e5f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">

<h2>Newsletter</h2>

<span class="asterisk">*</span> indicates required

<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required="">
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>

<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

<input type="text" name="b_25fe5fa5ee4114cf347fd278c_1dc98df0e9" tabindex="-1" value="">

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
<p class="brandingLogo"></p>

</form>

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->


[David]

Hi there,

in your first mailchimp code:

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>

Change this line:

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:600px;}

to:

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; max-width:600px;}

[Jordan Levi]

omg, that worked perfectly, thank you so much!

[David]

You’re welcome

[Jordan Levi]

hey, i was wondering if there’s anything i can add to the featured image caption code above to make all the captions italic and add 20 pixels of padding on the left and right

[Leo]

Can you link us to the page in question again?

The info is erased as the topic is marked as resolved.

[Jordan Levi]

yeah, it’s on articles and pages on https://www.intransigent.blog

[Fernando]

Try updating the code to this:

p.wp-caption-text.thumb-caption-text {
    display: flex;
    font-style:italic;
    padding-left: 20px;
    padding-right: 20px;
}

p.wp-caption-text.thumb-caption-text a{
    margin: 0 4px;
}

[Jordan Levi]

hell yeah, it worked, thank you!

[Fernando]

You’re welcome, Jordan!

[Author]

Posts