How to add Side by Side Image with A Gap Between Them? - html

Question

I've been trying to solve this for almost 6 hours just to get this to be responsive on mobile. Will someone please help me? It's really difficult and I really want to finish this homework.
I wanted it to look like this, but mobile responsive: https://imgur.com/kRcHUDJ
I only use HTML and inline CSS, hopefully, there is a solution to this.
<center>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
Demo here: https://codepen.io/anon/pen/WVpwwX
It does appear to be working great on desktop, what I wanted to achieve is given; but when it comes to mobile, the results aren't great. I had to scroll to the right just to see the full image.
My expected output is to have the images stacked up together when viewed on mobile. Thanks guys.

Answer 1

Almost there. The images need to have a max-width set for mobile devices so they will resize automatically instead of flowing off the screen because of their 500px width setting. Set display to inline-block as well:
https://codepen.io/ZorlacMeister/pen/PMpNRK
You can test easily in Chrome. Hit F12, then click on the little icon that looks like two mobile devices standing upright next to each other, then RELOAD the page to see the mobile layout.
HTML
<center>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/blog/"><img data-original="/uploads/button-1.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/testimonials.php">
<img data-original="/uploads/button-2.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
CSS
.img-responsive {
max-width:75%;
display: inline-block;
}

Answer 2

You can use a grid layout to achieve this.
grid-gap: 1em; specifies your padding between elements
center {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
img {
max-width: 100%;
}
<center>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
</center>

Answer 3

I set the image width to 100% and used a class named column on the <ul> to set the box-sizing, float a relative width and display.
I also set the <ul> paddings to 2.5%.
Check it on Codepen or below
.column {
box-sizing: border-box;
float: left;
width: 50%;
display: inline-block;
}
ul{
padding-left: 2.5%;
padding-right: 2.5%;
}
<center>
<ul class="homepageGuide column">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="100%" alt="example one">
</p>
<span class="color-overlay"></span>
</a>
</ul>
<ul class="homepageGuide column">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="100%" alt="example two">
</p>
<span class="color-overlay"></span>
</a>
</ul>
</center>