CODEWITHSUNDEEP
htmlcss
user3339242
user3339242

Reputation: 641

Css design issue

For some reason my background color does not cover the entire page width on my mobile device, However, it looks fine on a regular desktop. I cannot find the problem.

Problem screenshot

Here is my style.css:

@media only screen and (min-width : 250px) and (max-width : 780px)
{

#pageHeader{
    border:none;
    background-color:"background-color:#F5F5DC";
}


#pageHeader nav {

   height:300px;
   width:100%;
}

#pageHeader nav ul {
padding-left:0;
width:100%;
}

#pageHeader nav ul li {
width:100%;
text-align:center;
margin-left:25px;;
}

#pageheader nav a:link, #pageHeader nav a:visited {
height: 60px;
padding: 5px 23px;
text-decoration: none;
dislay: block;
width:100%;
}
#pageHeader img{
    width: 100%;
    height: auto;
    margin-bottom: 3%;
}


}

Here is my html:

!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us</title>
</head>
<body>
    <div id="pageHeader" style="background-color:#F5F5DC">
        <a href="index.php"><img src="style/logo.jpg" name="logo" width="431" height="94" alt=""/></a>
        <br />
        <br />
        <nav>
             <ul>
                <li ><a href="index.php">Home</a></li>
                <li style="margin-left:25px"><a href="#">All Products</a></li>
                <li style="margin-left:25px"><a href="#">Blog Using Ruby</a></li>
                <li style="margin-left:25px"><a href="#">User Javascript Page</a></li>
                <li style="margin-left:25px"><a href="#">Submit Concerns using Perl</a></li>
                <li class="active" style="margin-left:25px"><a href="#">About Us using HTML5</a></li>
                <li style="margin-left:25px"><a href="#">Asp Help Pages</a></li>
                <li style="margin-left:25px;"><a href="cart.php"><img src="style/cartimage.jpg" name="shopping cart" /></a></li>
            </ul>
        </nav>
    </div>
    </div>
    <h1 align="center">About Us</h1> </br> </br>

    <div align="center" id="pageBody">
        <table width="100%" border="0" cellpadding="6">
            <tbody>
                <tr>
                    <td> Code omitted </td>
                </tr>
          </tbody>
        </table>

        <div id="pageFooter">
        Copyright |<a href="storeadmin/admin_login.php">Admin Log In </a>      
        </div>
    </div>
</body>
</html>

Upvotes: 1

Views: 63

Answers (2)

pwdst
pwdst

Reputation: 13735

Remove the explicit height on the nav element - let the flow content dictate that rather than setting it explicitly. If you clear fix the floats in the unordered list using the CSS-

.group:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
    }

(See http://css-tricks.com/snippets/css/clear-fix/)

The list will take the height of its contents.

You will also want to remove the margin left on the list item elements (these are at 100% plus the 25px margin), replacing it with padding-left and setting box-sizing: border-box on the list items (or just set the margin to zero when at a smaller viewport width as your design doesn't seem to need it).

The unordered list will need to look something like this-

<ul class="group">
   <li><a href="index.php">Home</a></li>
   <li><a href="#">All Products</a></li>
   <li><a href="#">Blog Using Ruby</a></li>
   <li><a href="#">User Javascript Page</a></li>
   <li><a href="#">Submit Concerns using Perl</a></li>
   <li class="active"><a href="#">About Us using HTML5</a></li>
   <li><a href="#">Asp Help Pages</a></li>
   <li><a href="cart.php"><img src="style/cartimage.jpg" name="shopping cart" /></a></li>
</ul>

In either case you should remove the inline margin-left: 25px styles - you will find it much more maintainable to keep these externally in your CSS.

Upvotes: 1

Juan Ma
Juan Ma

Reputation: 69

Look that you have an extra tag when you close your

<div id="pageHeader" style="background-color:#F5F5DC">

If you are using more code, and floating some tags, dont forget to put the "overflow:hidden" in the container that "contains" the tags floated!

Upvotes: 2

Related Questions