Column With Under 1200px - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Column With Under 1200px

R

REVOLUTION

SP Page Builder 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?

0
Website
https://www.revolution.hu
3 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
2 years ago #137596

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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #137538

Hi

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.

0
R
REVOLUTION
Accepted Answer
2 years ago #137597

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?

0