Tagged: columns on mobile
Hi!
I have a problem with the column alignment on mobile devices. I have three 1/3 columns next to each other which should be displayed beneath each other on mobile – which they don’t. Instead the three icons which are in the columns are deferred into each other…
I searched in the forum and found the following code but it doesn’t work for me… Any suggestions?
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .flex_column {
margin: 0px !important;
margin-bottom: 20px !important;
width: 100% !important;
}
}
Thanks,
Paul
Hi DonPaul93,
I couldn’t see anything like that on my end, could you post a screenshot of the issue and in what browser you are seeing it please?
Thanks,
Rikard
Hi Rikard,
Thank you for responding! Here you go…
Here I used a Samsung Galaxy S III with opera, but the issu also happend on a iPhone 6 and iPhone 5…
Thanks,
Paul
Hi!
Please try changing the code to following one
@media only screen and (max-width: 767px) {
.flex_column { width: 100% !important; margin-left: 0 !important; }}
If that does not help, please create a temporary admin login and post it here privately so we can look into it.
Edit: On another thread i fixed your custom CSS. This should be working fine as well :) Let us know if it does not.
Best regards,
Yigit
Hi Yigit,
Thank you for trying to fix that. Sadly the code does not work …
Best regards,
Paul
Hi,
I adjusted the code in Quick CSS a bit and it does work fine on my end. However icons are broken. Please refer to this post – http://kriesi.at/documentation/enfold/enable-cors/ to fix it :)
Best regards,
Yigit