Ignoring breakpoint for some rows

[oliverr]

Hello guys,

Is it possible to manipulate breakpoints for certain rows in a page layout?
My problem is that I need two pictures next to each other. This works fine for desktop, but the mobile
version does move these pictures under each other.

I have a layout with 4 columns and for mobile and tablet I want to have a 2×2 layout.
I did not find out how to do this?

Thanks!

[David Martin – Support]

You might be able to force this by adding a custom class to the parent row or PB asset and then using a media query to force the width to what you require.

Add the custom class to the said items and let me know.

– David

[oliverr]

Hey, thanks for your response.

I understand your approach, but what do I need to add to the CSS class exactly?

[David Martin – Support]

Hi,

Great, you can add a class using this:

[oliverr]

Hey, I know how to add a extra class, but I do not know about the css-code that will do the job.

[Swift Ideas – Ed]

Hi @redro

Can you please try using the included Custom Sizing options – under the Custom Sizing tab. If you set XS to 6, that will make it 50% on mobile. Also please add this custom css until the next update:

.col-xs-6 {
    width: 50%!important;
}

That should sort it.

– Ed

[oliverr]

Thanks! This works.
Is the topic “Custom sizing options” somewhere documented? I couldn’t find it. Having a lot of smart options to choose from is very handy, but without telling your clients/users about it, it just a waste of time.

[oliverr]

Why are the rows breaking like this?

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

We’ll sort out documentation for those options, they are new which is why there isn’t docs yet.

The rows are breaking like that because you have columns, and the columns group the elements. That column wraps the two elements within, so the columns stack when they are responsively resized. If you wanted the same order, you’d need to have one block in each column.

– Ed

[oliverr]

So 4 columns and in each of them is one element?
This didn’t work for me.

This is not urgent, I will wait for the docs.

[Swift Ideas – Ed]

Can you link us to that page, and screenshot the admin side of it so that we can look into it?

Thanks,

– Ed

[oliverr]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi @redro,

Looks like you don’t have the XS column sizing set for the top set?

Also, looks like you have set col-xs-12 to 50%, rather than using xs-6?

– Ed

[oliverr]

Sorry, I deleted it to test whats going on without anything in it.
I put it back in. That wasn’t the source of the problem.

The settings are as shown in the image above.
XS = 6, SM, MD, LG = 3

Also, looks like you have set col-xs-12 to 50%, rather than using xs-6?

Custom-CSS isn’t in use for the columns, so I don’t understand what you try to tell me?

Just to be clear …

Tablet, Desktop:
X X X X

Smartphone:
X X
X X

[Swift Ideas – Ed]

Apologies, was a mistake with the css which I previously provided you. If you change:

.col-xs-6 {
    width: 50%!important;
}

to:

@media only screen and (max-width: 767px) {
.col-xs-6 {
    width: 50%!important;
}
}

That will sort it. Again, you can remove this code after the next update.

– Ed