CODEWITHSUNDEEP
htmlcss
DBS
DBS

Reputation: 1147

CSS for mobile layout

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

Answers (3)

Kevin F
Kevin F

Reputation: 2885

Try adding the meta viewport: Mozilla Developer

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 0

Abdulla Nilam
Abdulla Nilam

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

Donald
Donald

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

Related Questions