Archived topic
No gap between three images within a section on mobile.
3 replies · Started by Jamie on December 3, 2018
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.
Hi there,
You could try some CSS like this:
@media (max-width: 768px) {
.first-column,
.second-column {
margin-bottom: 20px;
}
}Let me know :)
Perfect, thankyou!
You're welcome :)
