Disable column stacking

Support
#1

Hello, I’m creating a team page, where I want to show about 4 photos across on desktop (in 7 rows). On a mobile phone, I’d like to show 2 across. On X theme currently, it’s stacking every photo (so only 1 photo shown across on mobile). How can I disable that so more photos can render? Thanks.

#2

Hi there,

Thanks for writing around! Try adding the following code in the Theme Options > CSS:

@media (max-width: 767px) {
    .x-column.x-1-4 {
        float: left;
        width: 49%;
        margin-right: 2%;
    }
    .x-column.x-1-4:nth-child(2n) {
        margin-right: 0;
    }
}

Let us know how this goes!

#3

Hi Nabeel,

That didn’t seem to prevent column wrap. I added it to my global css file (where I’ve set fonts and sizing for desktop and mobile). I’m working inside a child theme. Anything else I should do differently? Or a different way?

#4

Hi There,

First, please check your entire custom CSS here and address found errors. Else the custom CSS provided below will not work.

Then please update the given CSS code above to this:

@media (min-width: 481px) and (max-width: 767px) {
	.break-in-two .x-column.x-sm {
		float: left;
	    width: 48%;
	    margin-right: 4%;
	    margin-bottom: 4%;
	}
	.break-in-two .x-column:nth-child(2n) {
		margin-right: 0;
	}
}

/*Make the image take the width of columns*/
@media (max-width: 767px) {
	.break-in-two .x-column .x-image,
	.break-in-two .x-column .x-image img {
	 width: 100% !important;
     max-width: none !important;
	}
}

Then add a CLASS break-in-two to the ROWs, where your team columns are.



What this does, is to break the columns in two on screen width between 481px and 767px. Then break to one column on screen width 480px and below.

More details on how CLASS works here, And CSS properties here.

Hope that helps,
Cheers!

#5

OMG that works! Thanks so much for both the code and explanation so I can customize. Woo hoo!

#6

We are delighted to assist you with this.

Cheers!

#7

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