100% Column breakpoint

Dear Kriesi Team,

I used this code (slightly adapted, e.g. width: 50%) for my own project to switch from a four-column grid row to a two-column grid row on smaller mobile devices (max-width 1366px, min-width 768px). Unfortunately this code and some others I tried myself did not work.

In the meantime I tried reach the same with normal columns instead of grid row (4 columns on desktop, 2 columns on tablet landscape, 1 column on tablet portrait and smartphone). I would like the 2-column layout on mobile devices with max-width 1366, min-width 768px. Unfortunately my CSS-code to achieve this, does not work properly. It shows the 2 columns next to each other, however column 3 and 4 do not follow nicely: column 3 does not float to the left under column 1, but already starts unter column 2. I tried with CSS float, display, position, but nothing worked.

@media only screen and (max-width: 1366px) {
div .av_one_fourth {
width: 46%;
margin-left: 4%;
float: left !important;
}
}

Could you please help me with the right CSS code? Many thanks in advance!

Best regards, Cornelie

Dear Ismael,

thanks a lot for your quick reply. I tried the new CSS code, but unfortunately with no success. With your settings, all columns are displayed below one another. So I changed the margins and width a little to fit at least two columns next to each other on my tablet.

Despite of disabling File Compression settings and disabling Equal Height, the third column stills connects below the second one, because the first one is higher due to more text. [I thought the option Equal Height was meant for such situations, but probably I misunderstood.] Anyway, the CSS code now looks like this, but it does not do the job:

@media only screen and (max-width: 1366px) {

.responsive .av_one_fourth.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_half.flex_column_div, .responsive .avia-content-slider-inner .av_one_fourth.first.flex_column_div {
margin-left: 0%;
clear: none;
width: 46%; /* Kriesi: 48% */
float: left;
}

.responsive .av_one_fourth.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth + .av_one_fourth.flex_column_div, .responsive .avia-content-slider-inner .av_one_fourth.flex_column_div {
margin-right: 2%; /* Kriesi: margin-left: 4% */
width: 46%; /* Kriesi: 48% */
float: left;
}
}

Hope you are willing to dive in again… Many thanks in advance!

Best regards, Cornelie

Dear Mike,

thanks a lot for this adaptation of the code. It seems to work now. Great!

Best regards,
Cornelie

Dear Rikard and all,

somehow the change from 4 to 2 columns on my tablets still does not work perfectly, since on 3 pages, two of the columns stick in 1/4 mode instead of changing into 1/2. Unfortunately I can’t figure out why.

Could you please have a look at it again? See also my comments in the private field.

Thank you so much!
Best regards, Cornelie

Dear Mike,

it seems to work on all pages. Thank you so much!
I also don’t know where this rouge empty paragraph tag is coming from, in the Avia Layout Architect everything looks fine to me.

Best regards, Cornelie