4 Spalten nebeneinander in mobiler Ansicht - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
September 30, 2024 at 4:05 pm #1468114
boehmmedia
Participant
Hallo,

ich würde gerne in einer Farb-Sektion vier Spalten nebeneinander auch auf Mobile (max-width: 767px) stehen lassen.

Den Beitrag für die zwei Spalten (https://kriesi.at/support/topic/2-columns-side-by-side-on-mobile/) hatte ich bereits gefunden und das funktioniert bei mir auch.

Nun habe ich versucht den Code anzupassen, was aber leider nicht zum gewünschten Ergebnis führt:
```
/* Four Columns in color section even on mobile */
.responsive #top #wrap_all .four-col .flex_column {
   width: 23.5%;
   margin-left: 0; 
}

.responsive #top #wrap_all .four-col .flex_column:is(:nth-child(4n+2), :nth-child(4n+3), :nth-child(4n+4)) {
   margin-left: 2%;
}

.responsive #top #wrap_all .four-col .flex_column:nth-child(4n+1) {
   clear: left; 
}
```
Die Spalten werden weiterhin untereinander angezeigt.
Was mach ich an der Stelle falsch?

Vielen Dank und Grüße aus Franken
Bernd
October 1, 2024 at 5:44 am #1468144

Ismael
Moderator

Hey boehmmedia,

Thank you for the inquiry.

Did you apply the name “four-col” in the Advanced > Developer Settings > Custom CSS Class field? We may need to inspect the elements to provide the appropriate modifications. Please provide the site URL in the private field.

Best regards,
Ismael

October 1, 2024 at 8:41 am #1468148

boehmmedia
Participant

Hi Ismael,

yes, i did apply the class four-col in Developer Settings in the color section.

I applied the css-code in quick-css.

you will find the URL below – what i want to create is that the four icon boxes below “Alle Vorteile auf einen Blick” are in one row even on mobile.

Kind regards
Bernd

October 1, 2024 at 9:06 pm #1468212
Guenni007
Participant
With the nickname, it’s not too hard to find your site. And when I see container that small (1010px), I know it’s not intentional. So there must be a rule in your ruleset that is not set correctly.

That css rule is not closed by a curly bracket.

Insert after the semicolon a curly bracket!
```
.gform_wrapper.gravity-theme .gf_progressbar_percentage.percentbar_orange {
	background-color:var(--enfold-main-color-primary);
```
don’t know if an @import rule works well over quick css – but is unusual.

if your question does not concern your own website – then I am sorry, but it should be changed anyway.

PS: csslint.net shows a parsing error at the pseudo-class: is
but from my point of view that is correct.
October 2, 2024 at 4:43 am #1468239
Ismael
Moderator
Hi,

Thank you for the update.

Please try to add this css code inside the css media query for smaller screens (max-width 767px):
```
#top .flex_column_table.av-4btnt-bc0f998b93a28d7e425a3498b18d0188.sc-av_one_fourth.av-equal-height-column-flextable {
    display: flex !important;
    flex-direction: row;
}

#top .flex_column_table.av-equal-height-column-flextable.av-4btnt-bc0f998b93a28d7e425a3498b18d0188 .av-flex-placeholder {
    display: none;
}
```
As @Guenni007 pointed out above, please make sure to check for any invalid css code.

Best regards,
Ismael
October 7, 2024 at 3:31 pm #1468577

boehmmedia
Participant

Hi Ismael,

your solution works. Thanks a lot.

@Guenni007: Thank for your notice. This problem is for a customer-website, not for our own.

Kind regards
Bernd

October 7, 2024 at 7:23 pm #1468598

Rikard
Keymaster

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.