Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Reduce caption padding in inline image block in 7.1?


poetica

Question

I'm trying to reduce the padding between an image and caption in 7.1. The default is ridiculously big. Does anyone know of a custom CSS code to fix that issue? I'd like a code that fixes it site-wide. The site is set to private right now because it's not ready yet....Here's an example though, this image is an inline image block.

Screen Shot 2020-01-28 at 11.27.53 AM.png

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@tuanphan is a hero! He sent me this code, which worked like a charm! figcaption.image-caption-wrapper {     padding-top: 0 !important; } .image-caption p {     margin-top: 5px;  

Posted Images

7 answers to this question

Recommended Posts

  • 1
9 minutes ago, ElaCV said:

Hi Tuanphan I'm also having the same issue.

Any chance you know of a workaround to reduce the gap between the image and the caption?

I've added one piece to change the font size of the captions but can't seem to change the padding:
 


.sqs-block-image .image-caption p {
    font-size: 13px;
    line-height: 1.4em;
}

Appreciate any help you could give

 

Can you share link to page in screenshot?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
3 hours ago, poetica said:

The website is private, so I'm guessing you can't access it? Is there a workaround? The client isn't ready for the site to be public.

You can setup  password & share url

If your client's doesn't want this...difficult to help.

Did you send question to my email? If yes, I replied your email with the code.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

@tuanphan is a hero!

He sent me this code, which worked like a charm!

figcaption.image-caption-wrapper {
    padding-top: 0 !important;
}
.image-caption p {
    margin-top: 5px;
    margin-bottom: 0;
}

Thank you so much!!!

Edited by sme06
Link to post
  • 0

If you don't want to add any code, you can change the image layout from Inline to Stack and then re-add the caption in the Title section under the image. Leave the Subtitle section blank. Save.

Then, under Design / Image Blocks / Image Block: Stack, change the Image Separation slider to 1% or whatever your preference might be. 

Edited by Jennifer_NM
Link to post
  • 0
On 3/27/2020 at 1:27 AM, sme06 said:

@tuanphan is a hero!

He sent me this code, which worked like a charm!

figcaption.image-caption-wrapper {
    padding-top: 0 !important;
}
.image-caption p {
    margin-top: 5px;
    margin-bottom: 0;
}

Thank you so much!!!

Thanks it works perfectly ! I was looking for this for several weeks. Thank you !

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...