Tagged: grid row
Hi
I am building a website using Enfold Grid Row to display 5 columns.
in the row settings I set the Mobile Behaviour to be Each cell to be displayed on its own.
But on mobile devices the rows do not collapse and are displayed all together instead of collapsing to 5 rows.
please help me fix this bug
Thanks
Uri
Hey uribinsted,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) {
.no_margin.av_one_fifth {
width: 100%;
display: block;
}
}
Best regards,
Rikard
Hi Rikard,
Thanks for your reply,
I used the code, and it does show each cell on its own but it still shrinks each cell/column to a 1/5th of the screen.
and I noticed also the footer has the same problem.
Hi,
Thanks for the screenshots. Please try this instead:
@media only screen and (max-width: 767px) {
.no_margin.av_one_fifth {
width: 100% !important;
display: block;
}
}
Best regards,
Rikard
Hi Rikard,
Thanks, the code fixed the grid row mobile display, but the footer area mobile display is still not good.
How can we fix the footer mobile display?
Regards,
Uri
Hi Uri,
Sorry for the problems, please try this as well:
@media only screen and (max-width: 767px) {
#footer .av_one_third {
margin-right: 0 !important;
width: 100% !important;
}
}
Best regards,
Rikard
Thanks a lot Rikard :-)
Best Regards,
Uri
Hi Uri,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria