I am having trouble adjusting the CSS on my website to make it more mobile-friendly. The site renders correctly in major desktop browsers like Chrome, IE, and Firefox, but there are issues with the rendering when viewed on mobile Safari or Chrome. Interestingly, IE mobile displays the site correctly.
To view the jsfiddle, click here: https://jsfiddle.net/1mxLfzyb/
You can visit the live URL at .
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; }
}