Solved SP Page Builder

Column with under 1200px

Asked by REVOLUTION 2 years ago Last activity 2 years ago

My problem is that I have a row with 12+12+12 column widths. So three columns below each other.
When the screen width is reduced below 1200 px, the three columns are set to one third width, so I have 3x 33.3333% columns. In the column settings, the width is set to 100% for all resolutions, yet it is still changed by Page Builder.
I tried turning Fill columns on and off in Row settings, but it didn't help.
In PB 3.x versions, there was an option to set the column width (1-12) for different resolutions. Is there any way to put this back? How and what should I change to not set the column width below 1200px?

Accepted answer

Marked as the solution

Pavel

2 years ago

When the screen width is reduced below 1200 px, the three columns are set to one third width, so I have 3x 33.3333% columns. In the column settings, the width is set to 100% for all resolutions, yet it is still changed by Page Builder.

Hi. This is not a typical problem, but only it happens with you. Therefore, it is necessary to determine the reason by viewing the CSS that is applied to this.

For example, I had a similar problem - the width values in the settings of the columns disappeared. I found via Dev Tools that in my custom.css file there is a code that has influenced it.

2 more replies

Mehtaz Afsana Borsha Staff

2 years ago

Thanks for contacting us. I need to talk about it with my team then I will let you know. Allow me some time please.

-Regards.

REVOLUTION Asked this

2 years ago · edited

I have checked the CSS, and there is a custom code set up that I still see as good. I've put the full HTML code and relevant CSS in hidden text.
The CSS code below is clearly calculated by the framework, not by me.
It is calculated between 960-1199px this way, so exactly one breakpoint for the assets.

#column-wrap-id-efa24911-8e06-47df-8c93-0f9e82b5c749 {
    max-width: 33.333333%;
    flex-basis: 33.333333%;
}

@media (max-width: 1199.98px)
#column-wrap-id-efa24911-8e06-47df-8c93-0f9e82b5c749 {
    max-width: 33.333333%;
    flex-basis: 33.333333%;
}

What's interesting is that this is what the system defaults to in CSS, but I don't know why when it's set to 12+12+12

Update1:
Okay, I see what the problem is. Instead of the hidden-xl variant, it now displays the other section (for tablets and mobiles), and at this resolution it still uses the fixed position. Okay, now it's clear, and thanks for the CSS tip!

Which is the hidden-lg breakpoint in the display? The tablet landscape, right?