[Resolved] No gap between three images within a section on mobile.

[Jamie]

Hi!

I have a section within my hompepage which, on the computer has 3 pictures next to each other with a small gap between them each horizontally. However, when viewed on a mobile phone, the pictures are shown vertically underneath each other which is fine, but there isn’t a small gap between each picture like there is on a computer. Are you able to let me know how to achieve this?

This is the code I currently have to make the photos appear next to each other on the section:

<div class="grid-33 tablet-grid-33 mobile-grid-100 first-column"><img class="aligncenter" src="https://www.travelgambit.com/wp-content/uploads/2018/12/tgblog.png" /></div>
<div class="grid-33 tablet-grid-33 mobile-grid-100 second-column"><img class="aligncenter" src="https://www.travelgambit.com/wp-content/uploads/2018/12/800800.png" /></div>
<div class="grid-33 tablet-grid-33 mobile-grid-100 third-column"><img class="aligncenter" src="https://www.travelgambit.com/wp-content/uploads/2018/12/packinghacks.png" /></div>

I tried putting <p><p/p> between each photos code, which made the mobile site have small gaps, but then the computer site didn’t look right!

Any help is much appreciated.

[Tom]

Hi there,

You could try some CSS like this:

@media (max-width: 768px) {
    .first-column,
    .second-column {
        margin-bottom: 20px;
    }
}

Let me know 🙂

[Jamie]

Perfect, thankyou!

[Tom]

You’re welcome 🙂

[Author]

Posts