Responsive web design using media query

Question

I am trying to make a responsive web page. In the page, header and footer are working fine when the size of the browser is getting reduced however that is not the case with navigation section.Currently reducing (moving the left border of the webpage to the left side) the size of webpage is dividing the navigation block in two rows.

What I want is to reduce the size of navigation block as is the case with header and footer. How can I achieve this?

<!DOCTYPE html>
<html>
<head>
<title> Responsive </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

@media screen and (max-width:959px) {

    div.container {
        width: 100%;
    }

    article {
        margin-top: 20px;
        margin-left: 0px;
    }

    .div1 {
        height: 15px;
        background-color: red;
        font-size: 30px;
        padding: 15px 10px;
        font-weight: bold;
    }

    nav {
        max-width: 600px;
        margin-left: 40px;
        overflow: hidden;
        margin: 0;
        margin-top: -50px;   
    }

    nav ul {
        text-align: center;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    nav ul li {
         float: left;
         display: inline-block;
    }

    nav ul a {
        *display: block;
        text-align: center;
        text-decoration: none;
        padding: 20px;
    }
}
</style>
</head>
<body>

<div class="container">

<header>
   <h1>City Gallery</h1>
</header>

<div class = "div1"> 
<nav>
  <ul>
    <li><a href="#">London</a></li>
    <li><a href="#">Paris</a></li>
    <li><a href="#">Tokyo</a></li>
  </ul>
</nav>
</div>
<div class = "div2">
<article>
  <h1>London</h1>
  <p>London is the capital city of England. It is the most
populous city in the  United Kingdom, with a metropolitan area of over
13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its founding by
the Romans, who named it Londinium.</p>
</article>
</div>

<footer>Copyright © W3Schools.com</footer>

</div>

</body>
</html>

Answer 1

see here jsfiddle

the nav goes on two rows because the links ( a ) are too big and have a big padding 20px . so you should reduce the font-size and also the padding when the screen gets smaller.

for example like this :

 @media screen and (max-width:768px) {
     nav ul li a { font-size:20px;}
 }
 @media screen and (max-width:480px) {
      nav ul li a { font-size:15px;padding:20px 10px}
 }

Responsive web design using media query

Question

1 answers

solution1
0 2016-08-01 09:09:58

Responsive web design using media query

Question

1 answers

solution1 0 2016-08-01 09:09:58

solution1
0 2016-08-01 09:09:58