CODEWITHSUNDEEP
htmlcssresponsive-design
user4515590
user4515590

Reputation:

Better way placing images in row

I want place two images in one row, and add 10px spacing between them. Since layout is responsive, the row should break on mobile screen and images should go one above the other.

Sample layout

I use just two images without extra code, it works, but there definitely should be better, more reliable way, using div containers that also allowing to add aligning to images(I need vertical-align:middle). What is better CSS to achieve this, specifically for this layout?

Upvotes: 1

Views: 84

Answers (1)

Sonia
Sonia

Reputation: 172

Maybe this can help you. Place the images inside a div with a width of 50%. To add the padding you can use box-sizing: border-box;

<div class="row">
        <div class="left ">
            <img src="http://www.codewithsonia.com/stuff/img/vader.jpg"  />
        </div>
        <div class="right ">     
            <img src="http://www.codewithsonia.com/stuff/img/vader.jpg"  />
        </div>
</div>

Make the images responsive by setting max-width to 100%

img {
    max-width: 100%;    
}

.left{
    width:50%;   
    float: left;
    position: relative;
    border-right:5px solid green;  
   -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
          box-sizing: border-box;       

}

.right{
    width:50%;
    padding-right: 0px;
    float: right;
    border-left:5px solid red;  
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}

.row:after {    
        clear: both;
  }

@media screen and (max-width: 300px) {
  .right {
    width:100%;
   border-left:0; 
    clear:right;
   }    
    .left{
    width:100%;
     border-right:0; 
    clear:right;
   } 
}

You can see a fiddle here http://jsfiddle.net/f4bt5Lq0/1/

Upvotes: 1

Related Questions