Trying to Make Two Columns Responsive


#1

Hi all!
I’m trying to use responsiveness on my layout here that has two columns, but want to collapse to one column when browser width reaches a certain point… not sure what I’m missing here. Help??

@import url(‘https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,700,700i’);
Body {
font-family: ‘Montserrat’, sans-serif;
}

h1 {
color: #256ba2;
font-size: 26px;
letter-spacing: 1px;
}

p {
text-align: left;
font-family: ‘Montserrat’, sans-serif;
font-size: 18px;
font-style: normal;
color: #818181;
font-weight: 300;
line-height: 26px;
}

div#wrapper {
padding: 0px;
max-width: 1130px;
}

div#app_body {
Max-width: 100%;
}

div#application {
max-width: 100%;
}

ul li {
text-align: left;
font-family: ‘Montserrat’, sans-serif;
font-size: 18px;
font-style: normal;
color: #818181;
font-weight: 300;
line-height: 26px;
}

div#main-wrapper {
padding:20px;
margin: auto;
position: relative;
display:block;
max-width: 1100px;

}

div#wrapper-one {
margin:0 1% 0 0;
float:left;
width:50%;
text-align: left;
vertical-align: top;
min-width:400px;

}

div#wrapper-two {
float:right;
margin:0 0 0 1%;
width:39%;
text-align: left;
vertical-align: top;
min-width:400px;

}

@media screen and (max-width: 889px){
#wrapper-one, #wrapper-two {
float:none;
display:block;
width:100%;
}
}


> <link rel="stylesheet" href="style.css"></link>
> 
> <div id="main-wrapper">
> 
> <div>
> 	<h1>
> 	<strong>In hac habitasse platea dictumst</strong></h1>
> 	<p>Nunc nec urna vel nisl ultricies bibendum. Vivamus fermentum at arcu non convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque molestie nisi ante, vitae convallis dolor malesuada tincidunt. Fusce tincidunt suscipit mi, ut gravida lorem scelerisque dignissim. Vivamus dapibus ultrices erat, a porta sem semper at. Duis vitae fermentum velit, at consequat est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
> 
> 	<br>
> 
> </div>
> 
> <!-- FIRST COLUMN WRAPPER -->
> 
> <div id="wrapper-one">
> 
> 	
> 	<h1>Sed ut nulla aliquam massa</h1>
> 	<p>
> 		Mauris ac rutrum diam, in cursus lorem: </p>
> 	<ul>
> 		<li>Ut viverra arcu ac congue lacinia.</li>
> 		<li>Vivamus vel est ultrices dui scelerisque auctor eu a massa.</li>
> 		<li>Praesent ut condimentum neque.</li> 
> 	</ul>
> 
> 	<p>
> 		Fusce ultrices sollicitudin lacinia. Vivamus luctus lacinia lorem vitae convallis.
> 	</p>
> <br>
> <h1>Vivamus gravida</h1>
> 		<p>Etiam euismod nisi in est scelerisque, et tincidunt mauris pretium. Mauris metus dui, blandit quis purus vitae, consectetur convallis justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
> 	
> 
> 
> </div>
> 
> <!-- SECOND COLUMN WRAPPER -->
> <div id="wrapper-two">
> 
> 	
> 
> 	<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
> 	<ul>
> 		<li>Duis vitae fermentum velit, at consequat est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
> 		<li>Vivamus fermentum at arcu non convallis.</li>
> 		<li>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
> 		<li>Nullam enim orci, faucibus ac ipsum ut, semper tincidunt nulla. Suspendisse potenti.</li>
> 		<li>Etiam non rutrum metus, ac gravida dolor. </li>
> 		<li>Vivamus gravida ante in bibendum semper. </li>
> 		<li>Sed ut nulla aliquam massa tincidunt bibendum id a metus.</li>
> 		<li>Etiam consectetur dictum laoreet.</li>
> 	</ul>
> 
> 	<p>&nbsp;</p>
> 
> </div>
> </div>
> </div>
> 
> 
> </div>

#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.