On my site below the slider area, I am using a grid row (1/2 + 1/2) with a custom height in pixel of 600px. On desktop it looks great but on mobile, there are lots of white space at the bottom. how do i control the heigh on mobile? I tried the following but it did not work
@media only screen and ( min-width: 600px ){
.flex_cell {
min-height: 200px !important;
max-height: 300px !important;
}
Hey navindesigns,
Thank you for using Enfold.
You should probably set the media condition from (min-width: 600px) to (max-width: 768px), so it applies to smaller screens or devices such as phones or tablets in portrait mode. And don’t forget to toggle the Performance > File Compression settings after adjusting the code.
Best regards,
Ismael
Hi,
I don’t think you understand what I mean. Please see screenshot – https://filebin.net/teeschd2tgvuqzto/Screen_Shot_2019-06-29_at_12.13.18_PM.png?t=y8eqfpup
The following CSS is not working
@media only screen and ( min-width: 768px ){
.flex_cell {
min-height: 200px !important;
max-height: 300px !important;
}
Thanks
Hi navindesigns,
I added the code for you, please check.
Best regards,
Victoria
that works
thank you so much!
Hi navindesigns,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria