CODEWITHSUNDEEP
htmlcss
Ryman Holmes
Ryman Holmes

Reputation: 756

CSS3 Media Query to shrink web page

I have used a CSS3 media query to shrink the body of a webpage with all its contents such as the navigation menu and the header of the page to fit in to the size once the webpage window has been resized up to a certain amount:

You can find the page running on JSFiddle here

Here is the HTML:

<div id="header">

  <div class="container">
  </div>
</div>

<center>
<div id="navbar">
<div class="navbarcontainer">

              <ul align="center">
              <li><a href="index.html" class="active">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="portfolio.html">Portfolio</a></li>
              <li><a href="contact.html">Contact</a></li>

              </ul>

</div>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
    border: 0;
}

.navbarcontainer{
width:800px;
}


#header{
    background-color:#2E3D4C;
    padding:62px 10px;
    /* -moz-box-shadow: 0px 2px 4px #fff;
    -webkit-box-shadow: 0px 2px 4px #fff;
    box-shadow: 0px 2px 2px #fff; */

    font-family: voces, sans-serif;
    font-size:80px;
    text-align:center;
    margin:0px;
}

#navbar{
    background-color: #fff;
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
    box-shadow: 0px 1px 4px rgba(0,0,0,0.6);
    padding:6px;


  /*   border-top:3px solid;
    border-color:#d22b2b; */

}

#navbar ul {list-style:none; 
            text-align: left;
            margin: 0 auto;
            font-family: Segoe UI;
            font-size: 15px;
            font-weight: bold;
            padding:6px;            
}

#navbar li {
    display: inline;        
}

#navbar li a {
    text-decoration:none;
    color:#302E2E;
    padding-top: 12px ;
    padding-bottom: 12px ;
    padding-left:22px; 
    padding-right:22px; 
    margin-right:5px;
background-color: #fff;    
}

#navbar li a:hover { color: #d22b2b; background-color:#000;}


body {
        background-color: #D5D8DB;
        min-width:947px;
     }

     body > img {

     float:left;
     margin-left: 155px;
     margin-top: 50px;

     }


@media (max-width: 480px) { 

#navbar{
background-color: red;
float:left;



}

#navbar li a{
background-color: red;
padding:5px 5px;  
}


.navbarcontainer{
width:480px;
}

body, #header, #navbar{
min-width:480px;
}
}

If you scale the window down to around 480px you will see the media query taking effect and the menu bar will change to red as well as the body width of the page narrowing down to fit the screen.

The problem that I'm having is once scaled down and the media query takes place, if you then scroll (horizontally) to the end of the page (right) you will see there is a gap between the end of the navbar and the end of the page, very tiny gap but I don't know why this is taking effect.

Would appreciate if someone solves this.

Upvotes: 2

Views: 1442

Answers (1)

astrodedl
astrodedl

Reputation: 210

If you are using paddings, actual div width will be width+padding : your div is 480px, plus 5 or 6px for the padding.

You can solve this by adding a box-sizing rule:

* {
    box-sizing : border-box;
    -moz-box-sizing : border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

And you also have to add an actual width, and set your container at 100% :

if the div #navbar has width : 480px; and padding : 5px;...

and this div contains another div .navbarcontainer that has width : 480px,

then .navbarcontainer has a width of 480px and is moved to the right because of the padding of its parent. So there's the gap you had.

That fixes the problem, but it's quick tweaking only : 

@media (max-width: 480px) { 

#navbar{
background-color: red;
float:left;
width : 480px; /* <-- HERE */

.navbarcontainer{
width :100%;
}

}

But again, this tweaking, this page can be very simplified!

Hope that helps!

Upvotes: 3

Related Questions