How to make responsive page like this?
Question
Pretty straight forward.
When I zoom in on my page, the divs and such don't expand to fit the document but on the original website i'm imitating it does. How does their code differ? What code are they using to do the trick.
Mine: http://socialvender.com/danielbrown
Theirs: http://gunbi.net/
Just hold CTRL and Zoom In.
Can someone help me out?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id = "container" />
<div class = "banner" />
<h4>Gundi!</h4>
<div id = "divider-p">
<div class = "seperators"><span></span></div>
<div id = "networks">
<!-- <div id = "facebook"><img src = "images/fb.svg" width = "24"></div>
<div id = "twitter"><img src = "images/twitter.svg" width = "24"></div>
<div id = "tumblr"><img src = "images/tumblr.svg" width = "24"></div> -->
</div>
</div>
</div>
<div id = "navigation">
<ul>
<li>
<a>
Home
</a>
</li>
<li>
<a>
Ranking
</a>
</li>
<li>
<a>
Support
</a>
</li>
<li>
<a>
Media
</a>
</li>
<li>
<a>
Store
</a>
</li>
<li>
<a>
Forum
</a>
</li>
</ul>
</div>
<div id = "players-online">
<div class = "amount">
<span>0 people are playing | server online</span>
</div>
</div>
</div>
<div class = "row">
<div class = "col-8 content">
<section id = "register">
<div class = "game">
<button id = "game-start" class = "col-2">Game Start</button>
<!-- <br><button id = "download" class = "blue">Download</button>
<button id = "register" class = "blue">Register</button> -->
</div>
</section>
</div>
</div>
</body>
</html>
Full Code Here: https://jsfiddle.net/yayyjL14/
1 answers
solution1
0 ACCPTED 2016-07-19 18:11:55
I see two problems with your site:
One, the navbar is not responsive because you haven't put it in a responsive container, as there is no fluid measurement (ie: percentages) for the width. I would recommend learning Bootstrap, a CSS/Javascript framework. Just the grid system alone (built on CSS) , would enable you to save a considerable amount of time building responsive containers that allow you to dynamically size your content depending on the size of the browser. You can download Bootstrap at: http://getbootstrap.com/ and learn the grid from: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Another problem I see is that there is no width assigned to the button, and thus it is prone to changing width. I would set the width to a px, just so it does not resize, and stays a certain width, as there as no point on a mobile device to have a button that is too small (generally stays the same size on both desktop and mobile, although you may alter this via media queries).
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.