Condensing images on mobile

Support
#1

Hello (again!) - Is there away to make the images on the mobile significantly smaller and next to one another? Verses one by one, I would like for it to be three side by side images in two rows, however on the computer I would like for it to remain as one long row. Also, I would like to keep the image module for each one verses classic block grid, as the image allows for Alt text

#2

Hello Samantha,

Thanks for posting in!

To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
	.x-column.x-sm.x-1-6 {
	    width: 13.33332%;
	}

	.x-column.x-sm.x-1-6 {
	    position: relative;
	    z-index: 1;
	    float: left;
	    margin-right: 4%;
	}

	.x-column.x-sm.x-1-6.last, 
	.x-column.x-sm.x-1-6:last-of-type {
	    margin-right: 0;
	}
}

We would loved to know if this has work for you. Thank you.

#3

Hello, it worked somewhat - instead of two rows, it put them in one row. Anyway to do two rows?

#4

Hi there,

Please try these codes:

@media(max-width: 979px){
	.x-column.x-sm.x-1-6 {
	    width: 30.33332%;
	    margin-bottom: 20px;
	}

	.x-column.x-sm.x-1-6 {
	    position: relative;
	    z-index: 1;
	    float: left;
	    margin-right: 4%;
	}

	.x-column.x-sm.x-1-6:nth-child(3),
	.x-column.x-sm.x-1-6.last, 
	.x-column.x-sm.x-1-6:last-of-type {
	    margin-right: 0;
	}
}

Here are some related links for further reading:

Hope this helps.

#5

It worked!!! Thank you so much :slight_smile:

#6

You’re welcome!
Thanks for letting us know that it has worked for you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.