terryfoster wrote:
OK.
I am using a floating div style for the site.
Now in the wider resolutions I want two boxes to float left side by side of equal widths of 48% with a 2% margin between
When in mobile resolution I want them to sit one atop the other. at 100% width
I may be missing something simple here - but I can't see it
Any suggestions/clues???
Thanks
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.boxWrapper {
width: 70%;
margin: 0 auto;
overflow: hidden;
}
.box {
float: left;
width: 49%;
background-color: #C03;
}
.marginLeft {
margin: 0 0 0 2%;
background-color: #FF6;
}
@media screen and (max-width: 700px) {
.box {
float: none;
width: 100%;
}
.marginLeft {
margin: 0 0 0 0;
}
}
</style>
</head>
<body>
<div class="boxWrapper">
<div class="box">Some stuff</div>
<div class="box marginLeft">Some stuff</div>
</div>
<!-- end boxWrapper -->
</body>
</html>