I'm struggling to create a responsive design for my webpage. The layout should consist of black blocks that display images.
Ensuring the layout adapts to different screen sizes is proving challenging. It needs to maintain its shape on smaller screens while fitting any size screen. On wider screens, the layout should expand accordingly.
I've attempted various solutions but can't seem to pinpoint the core issue causing the problem. It's not just one line of CSS that's off - it's something fundamental that I can't grasp.
Could someone create a Fiddle with just black boxes to troubleshoot this?
Here's my progress so far. The current issue lies in the margins between the blocks - they need to be 5px apart. When I adjust them as such, things start going awry. The block sizes are correct now, but I need to figure out how to space them properly.
HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8>
<link href="style.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="wrapper">
<a href="#" class="link">
<img class="mainImg" src="http://www.calvijn.nl/media/3529/IMG-20130925-WA0001_500x500.jpg" alt="test" />
</a>
<a href="#" class="link">
<img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
</a>
<a href="#" class="link">
<img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
</a>
<a href="#" class="link">
<img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
</a>
<a href="#" class="link">
<img class="subImg" src="http://stage.elephantcs.nl/wp-content/uploads/2011/11/img-impression-5.jpg" alt="test" />
</a>
</div>
</bod>
</uhmtl>
CSS:
#wrapper {
position: absolute;
left: 5%;
right: 5%;
top: 100px;
width: 90%;
height: auto;
background: red;
}
.mainImg {
display: inline-block;
float: left;
width: 33%;
}
.subImg {
display: inline-block;
float: left;
width: 33%;
}
Check out the fiddle here: Fiddle
Any tips on how to space the blocks correctly would be greatly appreciated!
Thank you in advance!