CODEWITHSUNDEEP
htmlcss
janlindso
janlindso

Reputation: 1239

Responsive div's with images without any margin on left and right

I am adding div's with serverside script that is showing images of album covers. Here's the HTML:

<div id="releases">
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
</div>

And here is my css so far:

#releases {
margin: 20px 0;
width: 100%;
}

#releases div.album {
float: left;
margin-right: 15px;
width: 100%;
max-width: 118px;
}

#releases div.album .cover {    
padding: 2px;
background: #fff;
box-shadow: 1px 1px 2px #a9aaa8;
}

#releases div.album .cover img {
width: 100%;
vertical-align: middle;
}

I am now adding margin right for all albums to add some space between them, but unfortunately leaving margin also after the last div (I dont't want any margin before the first or after the last). And is it possible to make all of this responsive, so the cover artwork and cover div adjusts accordingly to the "releases" div.

Upvotes: 1

Views: 92

Answers (1)

Lynel Hudson
Lynel Hudson

Reputation: 2405

To remove the margin on the first and last div: you can use:first-child{ margin: 0 } and :last-child{ margin: 0 }, and ofcourse you can make your site responsive with media queries.

The media query I used makes it so you can adjust the size of the window in full screen to see the #releases div turn gray when the window is moved down to 600px wide, but you can put whatever styles you want at whatever screen size you want by changing the values.

#releases {
margin: 20px 0;
width: 100%;
}

#releases div.album {
float: left;
margin-right: 15px;
width: 100%;
max-width: 118px;
}

#releases div.album .cover {    
padding: 2px;
background: #fff;
box-shadow: 1px 1px 2px #a9aaa8;
}

#releases div.album .cover img {
width: 100%;
vertical-align: middle;
}

div:first-child {
margin:0;
}

div:last-child {
margin:0;
}

@media( max-width:600px ){
  #releases { 
    background:#ddd;
    height:300px;
  }
}
<div id="releases">
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
    <div class="album">
        <div class="cover"><img src="cover.jpg" /><br />Artist</div>
    </div>
</div>

Upvotes: 1

Related Questions