Docs

[scottkwilson]

Hello, I want to create an image gallery that includes text below each image in order to provide a brief explanation of what each image is. I have done with with some success by including the images in a block quote and then adding text below it in another block quote.The problem I’m having though is that the text is too far away from the gallery image – I want to reduce the space between the image and the text. Here is the page for reference: http://scottkeithwilson.com/index.php/portfolio/

Also, how do I add borders to the images as seen here: http://theme.co/x/demo/integrity/1/shortcodes/responsive-lightbox/#

[Nabeel A]

Hi again,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-block-grid {
    margin: 0 !important;
}

I see empty <p></p> tags, please remove them to reduce the spacing.

To add borders to images, add this code in your Customizer:

.x-block-grid.four-up a.x-img>img {
    border: 1px solid #EEEFF1 !important;
}

Let us know how this goes!

[scottkwilson]

The borders worked for the images and it looks good! The spacing between the images and the text did not change though when I added the CSS in the customizer. Also, I noticed on the iphone that the order is not image, text, image, text, image, text, etc. It is image, image, image, image, text, text, text, text. How do I fix this? Thanks again for all the help.

[scottkwilson]

This reply has been marked as private.

[Rad]

Hi there,

Please add this,

.x-block-grid,  .x-block-grid.four-up a.x-img>img{
    margin: 0 !important;
}

Hope this helps.

[scottkwilson]

This didn’t fix either issue unfortunately. Question – am I approaching this correctly? If I want to have a gallery of images with a bit of text underneath each one, what’s the best way to do that? On the iPhone all the images are listed, then all the text blocks are listed. I need it to be image>text>image>text, etc. on mobile. Thanks again

[Christian]

Hey Scott,

You can setup a row with 4 columns for that. On mobile, the image will stack above the text. See https://cloudup.com/cZ0SQWmpG6r (play in Firefox) for demo.

Thanks.

[scottkwilson]

Thanks. I would like to keep the existing light box functionality as well as the current layout when viewed on a PC/laptop, like it is here: http://scottkeithwilson.com/index.php/portfolio/ In other words, this is perfect on a regular computer, it’s just that the image>text order is not correct on mobile. Is there a way to keep it as it is here on a PC, but on a mobile have the text come after the image? Sorry if I’m being difficult. Also, it would be great to reduce the space between the images and text.

[Friech]

Hi There,

On mobile view the text is coming after the image already, would you mind to clarify what you’re trying to do?

You can add this under Custom > CSS in the Customizer to bring the text closer to the image.

.x-block-grid-item .x-img {
	margin-bottom: 0;
}

Thanks.

[Author]

Posts