I am trying to make a simple responsive page but don't understand what is stopping me to do so
Question
I want to make it fully responsive but don't know whats wrong with it! In pc or big screen devices it will be two column site but for mobile user it sould be one column site. Please help Any help will be appreciated. Thanks in Advance.
<html>
<style type="text/css">
body {background-color:white;}
.container {background:whitesmoke;max-width:800px;margin:auto;}
.header {background-color:tomato;color:white;font-size:25px;text-align:center;
padding:5px 0px 5px 5px;max-width:800px;margin:auto;font-family;Georgia;}
div .center {text-align:center;background-color:whitesmoke;overflow:auto;}
.listimg {width:35%; max-width:300px;}
.font {font-weight:bold;font-style:italic;font-size:20px;}
ul{list-style-type:none;display:block;}
.main li {display:block; width:50%;float:left;margin-left:-2%;}
.main li img {display:block; width:50%;float:left;overflow:auto;}
</style>
<div class="container" id="bg">
<div class="header">
<p> <b> Become An XYZ XYZZ </b> </p>
</div> <!-- End of header -->
<div bgcolor="whitesmoke">
<div class="center">
<ul class="main">
<li>
<img class="listimg" src="images/point1.jpg" />
<p class="font"> Work at your time </p>
</li>
<li>
<img class="listimg" src="images/money grows.jpg" />
<p class="font"> Get Gratuity & other Benefits</p>
</li>
<li>
<img class="listimg" src="images/money grows.jpg" />
<p class="font"> Mediclaim upto Rs. 1 Lac</p>
</li>
<li>
<img class="listimg" src="images/money grows.jpg" />
<p class="font"> Housing Loan as low as 5-7.5%</p>
</li>
<li>
<img class="listimg" src="images/money grows.jpg" />
<p class="font">International recognition</p>
</li>
</ul>
</div> <!-- End of center -->
</div> <!-- End of container -->
</div>
1 answers
solution1
0 ACCPTED 2016-03-06 18:08:13
If you are not using any responsive framework then you have to write media queries to tell browser how to render website for different browser width.
For example in your case if you want to make it single column layout when browser width is less than 600px you can use this with your css.
@media (max-width: 600px) {
.main li {
display: block;
width: 100%;
float: left;
margin-left: -2%;
}
}
You can read more about media queries here https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en
Otherwise use frameworks like Bootstrap http://getbootstrap.com/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.