Reputation: 1147
I need help with tweaking the CSS for my site so that its mobile friendly. When you open the site in major desktop browsers such as Chrome, IE and Firefox, everything renders correctly, but if I open the site in mobile Safari or Chrome, the rendering is off. Strangely, IE mobile renders the site correctly as well.
The jsfiddle is here: https://jsfiddle.net/1mxLfzyb/
The URL to the live is http://lazyquiz.azurewebsites.net.
HTML
<!doctype html>
<html>
<html lang="eng">
<head>
<meta charset="utf-8" />
<title>Lazy Quiz</title>
<link rel="stylesheet" href="default.css" />
</head>
<body>
<div class="wrapper">
<header class="header">LAZY QUIZ</header>
<article class="main">
<h2>Quiz of the Day!!</h2>
<iframe src="pages/QOD/qod.html"></iframe>
</article>
<aside class="aside aside-1">
<ul>
<li><a href="pages/Entertainment/entertainment.html">Entertainment</a>
</li>
<li><a href="pages/Entertainment/entertainment.html">Sports</a>
</li>
<li><a href="pages/Entertainment/entertainment.html">Games</a>
</li>
<li><a href="pages/Entertainment/entertainment.html">Geography</a>
</li>
<li><a href="pages/Entertainment/entertainment.html">History</a>
</li>
</ul>
</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</footer>
</div>
</body>
</html>
CSS
html{
margin:0px;
padding:0px;
background-color:#a8a8a8;
}
/*
body {
padding: 2em;
}
*/
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
width:1000px;
margin:0px auto;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background:black;
color:white;
padding:20px;
margin:10px;
}
.aside-1 {
background: gold;
margin:10px;
background:#ededed;
width:100px;
height:575px;
}
.aside-1 li {
list-style:none;
font:bold 14px Tahoma;
padding-bottom:75px;
text-align:left;
}
.aside-1 a:link{
text-decoration:none;
color:black;
}
.aside-1 a:visited{
text-decoration:none;
color:black
}
.main {
background: deepskyblue;
margin:10px;
}
iframe {
display:block;
width:100%;
height: 500px;
}
.aside-2 {
background: #66CCCC;
margin:10px;
width:100px;
height:575px;
}
.footer {
border-top:2px solid #e0e0e0;
margin:10px;
}
.footer ul{
padding:0px;
text-align:left;
}
.footer li{
padding:5px;
display:inline-block;
list-style:none;
font:bold 14px Tahoma;
margin:0px;
justify:left;
}
@media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
@media all and (min-width: 800px) {
.main { flex: 4 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
Upvotes: 2
Views: 470
Reputation: 2885
Try adding the meta viewport: Mozilla Developer
<meta name="viewport" content="width=device-width, initial-scale=1">
Upvotes: 0
Reputation: 38670
use media query
examples for media Query
@media only screen and (min-width: 1490px)
{
}
@media only screen and (max-width: 1490px) and (min-width: 1366px)
{
}
@media only screen and (max-width: 1366px) and (min-width: 1280px)
{
}
@media only screen and (max-width: 1280px) and (min-width: 1024px)
{
}
@media only screen and (max-width: 1024px) and (min-width: 768px)
{
}
My opinion is use Bootstrap Framework. You can Learn on here
EDIT 01
.wrapper {
width: 100%;
}
Upvotes: 1
Reputation: 1200
The width: 1000px;
style on your .wrapper
element should be changed to max-width: 1000px;
. This will allow your site to still be contained to a 1000px width on wide viewports, but will allow it to scale down on narrower viewports by not forcing it to be 1000px wide, making the site responsive.
Upvotes: 1