html - Responsive side by side images
Im trying to create a responsive layout in a shopify theme that looks like: http://postimg.org/image/7r6jo647l/ (http://postimg.org/image/7r6jo647l/). I've tried everything and cannot get the desired result. I'm turning to the brighter minds on reddit for help. Any help at all would be appreciated, i named the image frustrating.jpg which pretty much says it all :-/
I'm not looking for someone to do the grunt work, just point me in the right direction...before i go bald tearing my hair out.
Answer
Solution:
If your theme needs to accommodate a variable number of images use css to manage this:
A minimal set of display:flex display:table for the image wrapper
A fiddle with flex is at:
https://jsfiddle.net/xma6kbxa/ (https://jsfiddle.net/xma6kbxa/)
.wrap, .wrap *{
box-sizing:border-box;
}
.wrap{
display:flex;
margin-left:-5px;
margin-right:-5px;
clear:left;
width:100%;
border:1px solid blue;
}
.wrap .holder{
margin:5px;
}
.wrap img{
width:100%;
height:auto;
}
}<div class="wrap">
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>
</div>
<div class="wrap">
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>
<div class="holder"><img src="http://placehold.it/350x150"></div>Answer
Solution:
that is easy with Bootstrap - the following will create 4 adjacent divs for the images - these will stack horizontally in a single row of 4 on medium to large size sceens, two rows of two adjacent images on small screens and will stack vertically on mobile (xs) screens.
//row of 4 adjacent images
<div class="row">
<div class="col-md-3 col-sm-6">
<img src="smallImage-1.jpg" alt="Small Image1">
</div>
<div class="col-md-3 col-sm-6">
<img src="smallImage-2.jpg" alt="Small Image2">
</div>
<div class="col-md-3 col-sm-6">
<img src="smallImage-3.jpg" alt="Small Image3">
</div>
<div class="col-md-3 col-sm-6">
<img src="smallImage-4.jpg" alt="Small Image5">
</div>
</div>
Source
Didn't find the answer?
Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.