Hallo zusammen
im Responsive Template Enfold ändert sich die Darstellung des Grid Row In der Standardeinstellung folgendermaßen: aus 1 Zeile mit 4 Spalten (1/4+1/4+1/4+1/4) wird bei der Unterschreitung einer bestimmten Fensterbreite 4 Zeilen mit 1 Spalte (1/1)
Ich hätte in der Darstellung gerne einen Zwischenschritt d.h. Fensterbreite >800 px 1 Zeile mit 4 Spalten (1/4+1/4+1/4+1/4); bei Fensterbreite 400- 800 px, 2 Zeilen mit 2 Spalten (1/2+1/2); Fensterbreite < 400px 4 Zeilen mit 1 Spalte(1/1)
… in etwa so wie auf Startseite von Apple http://www.apple.de
Freue mich auf einfache Lösungsvorschläge :-)
Danke und Grüße
Flo
Hey flo-ko!
Thank you for using Enfold.
The cells should automatically switch to one column on screen width 767px and below. If you want to have two columns on tablet screens, add this code in the Quick CSS field:
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* Add your Mobile Styles here */
#top .flex_cell.av_one_fourth {
width: 50%;
display: block;
float: left;
}
}
Cheers!
Ismael
Hey Ismael,
many thanks!
I have copied the complete code to the Quick CSS field… unfortunately it does not work?!
Thanks
Flo
Hi!
then try to add an !important:
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* Add your Mobile Styles here */
#top .flex_cell.av_one_fourth {
width: 50% !important;
display: block !important;
float: left !important;
}
}
Clear browser cache and hard refresh a few times.
Cheers!
Andy
Hi Andy,
it works!
Thanks
Flo