Add space between image on mobile

[spiker]

How can I add space between images on mobile? On the desktop version they are side by side and have space between them, but on the mobile version they are touching.

I am also having an issue where changes are showing in a desktop browser but don on mobile devices. They do show on inspector in Chrome but dont show on multiple devices, even having cleared cache.

[details=Summary]
https://pltmontana.com/aspen/ [/details]

[spiker]

UPDATE: I made a new page and loaded the layout, this seems to have fixed some of the changes that I was not seeing.

I would still like to know how to add space between photos when they stack.

I also would like to know how I can add some space between the text and the edge of the browser. See screen show

Summary

here is the link where i can see the changes on mobile
https://pltmontana.com/telluride/

[Prasant]

Hello Spiker,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

.x-image img {
    margin-bottom: 20px;
    margin-top: 10px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[spiker]

Ok, I have added that but, I am still unable to see any changes on a mobile device? The text is still cut off and I have added a slider to the top of the page, but cannot see it.

[ruenel]

Hello @spiker,

Please edit your page back in Cornerstone. In your image and and text element settings, please add top and bottom margin so that when they stack, there will be a gap on it. After making any of this changes, please clear your caches and clear your browser cache too. You may use private browsing mode in testing your site so that you can immediately see your changes.

Please let us know how it goes.