Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #989652


    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:

    and a screenshot

    View post on

    I have played around with different image sizes and Grid Row settings but nothing has helped.



    Hey DigitalEssence,

    Thanks for the screenshot and link, though I can’t see those results on your actual site?

    Best regards,


    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?



    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,


    Fabulous, that’s resolved the issue.

    Thank you.



    Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.