Tagged: grid row, Gridrow, mobile, whitespace
Hi,
Enfold: Version: 4.4.1
WordPress: 4.97.7
No custom CSS
No Active plugins
I’m using the GridRow element to display a single row of images. Ultimately there will be 3 rows.
When the browser window is reduced to below at/around 997px I get a horizontal gap between the images.
This can be seen in action at: http://91.204.210.11/~kinnes/
and a screenshot
I have played around with different image sizes and Grid Row settings but nothing has helped.
Thanks.
Hey DigitalEssence,
Thanks for the screenshot and link, though I can’t see those results on your actual site?
Best regards,
Rikard
Hi Rikard,
that is odd as I am seeing it in IE, Firefox, Chrome and Safari on three different machines (Win 10, Mac and Win 2008 RS). One of which has never been used to view the site before.
Were you able to bring the width of the browser down to mobile size and didn’t see the white gaps under the images?
Hi,
Thanks for the update.
This css code should remove the default bottom margin of the cells.
@media only screen and (max-width: 989px) {
.responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
margin-bottom: 0;
}
}
Don’t forget to purge the cache and toggle the css/js compression from the Performance panel.
Best regards,
Ismael
Fabulous, that’s resolved the issue.
Thank you.