Prevent Row Break in smaller screen size

[lancebarton]

If you view this page: http://54.191.189.56/working

you will see a section near the top titled “powerful sports benefits” and when you go down to the 481-767 size it breaks into 2 columns, 2 rows. Way down the page you will see a section titled “test results” and though I have constructed that section the same way, the rows break so the columns are stacked on top of each other. I really want rows of 2 in this section at that size, and then it is fine if they are stacked one on top of the other in the smallest phone size. What am I doing wrong? I created a different section for each of those to display on the smaller screen sizes. Login info attached.

[christopher]

Hi there,

The cause of the behavior you see is that the first section you talk about has 4 columns. So in the breakpoint section you have mentioned it will split to 2. But the last section in question has 3 columns and it is not possible to split it and it stack all together.

So you need to go to the Row which you added the 3 columns and click on the Magnifying glass icon of that row and click on the Customize tab and add a class such as keep3.

Then you can add the CSS code below to Pro > Theme Options > CSS:

@media (min-width: 482px) {
 .keep3 .x-column.x-1-3 {
    width: 33.33333%;
    float: left;
}   
}

So you do not need to add the another row for that small screens and you simply will keep the 3 in the breakpoint span you like by simply adding the class.

I could not implement the solution for you because the given URL/User/Pass is not working upon testing.

Thank you.

[lancebarton]

Hey Christopher thank you. The user login is fixed (it’s different now, see the next private message). The thing is, and I know you couldn’t see this without logging in, I created a multiple row, 2 column section for this screen size and they are stacking. Can you take a look at that? I’m sure you know, but while on the page, pick the second to smallest screen size and you will see that section. Thank you!!!

[ruenel]

Hello There,

The password still does not work. Please double check it.

Thanks.

[lancebarton]

Try the same but the password in the secure note below.

[jumar]

Hello there,

Have you sent the login details privately, or are these the ones we have on the secure note? If sent privately, I advise you add/update needed details on the secure note next time so we can cater support for you immediately.

Unfortunately, the login details on the secure note is still wasn’t working. Please double check it. Also can you share to us the URL of the page you have set the multiple row, 2 column section on the secure note?

Thank you.

[lancebarton]

See attached private note.

[friech]

Hi There,

Thank you for the credentials, do you mean something like this?

If so, please add a CLASS stay-inline on your ROW (where these 1/2 columns are placed)

Then add this to your page CSS or Theme Options > CSS

@media (min-width: 481px) and (max-width: 767px) {
	.stay-inline .x-column.x-sm {
		float: left;
	    width: 48%;
	    margin-right: 4%;
	}
	.stay-inline .x-column.x-sm:last-child {
		margin-right: 0;
	}
}

Take note that this will only work with 1/2 column, you need to adjust the width: 48%; if you want this to use on other column sizes.

Hope it helps,
Cheers!

[lancebarton]

PERFECT! Thank you so much!!!

[friech]

We are delighted to assist you with this.

Cheers!