CODEWITHSUNDEEP
htmlcsswebweb-deployment
Armyguy556
Armyguy556

Reputation: 35

I have this simple responsive website im working, but i have an issue

I wrote this html/css code and i have it layed out responsively but when i resize it to responsive view the text on one of the main info areas has a big square gap in it!! I tried margin and padding and like everything. It confuses me. Also on my mobile version of the nav bar, i would like the items to display line by line, but they wont break. All help would be appreciated. Here is the code:

HTML: http://pastebin.com/JDzezxVe CSS: http://pastebin.com/9vJvk0Sw

*{margin: 0px;
    padding: 0px;}
 
body{
    background:#CCC;
    width: 70%;
    margin-left: 20%;
    margin-top: 0px;
    height: 900px;
}
 
.mainHeader{
        padding: 0;
        background:#666;
        height:36px;
        width:100%;
    border-radius: 5px;
    position: relative;
    top: 150px;
    left: -70px;
    box-shadow: 10px 10px 10px #767373;
}
 
.mainHeader nav ul li{
        display:inline-block;
        list-style:none;
        margin: 10px 0px 0px -30px;
    float: left;
    margin-left: 15px;
    position: relative;
    top:  -128px;
    left: 10px;
}
 
.mainHeader nav ul li a{
        text-decoration: none;
    border-radius: 3px;
    color: white;
    padding: 7px 20px 10px 20px;
    margin-right: -15px;
    font-family: 'Eras ITC';
}
 
.mainHeader nav ul li a:hover{
        background: #f18529;
}
 
.mainHeader nav ul .active {
        background: #f18529;
}
 
.mainInfo{
    background:white;
    height: 500px;
    width: 100%;
    position: relative;
    top: 200px;
    left: -70px;
    border-radius: 5px;
    box-shadow: 10px 10px 10px #727272 ;
}
 
.mainInfo .miInfo p{
    font-family: Arial;
    padding:  10px 10px 10px 10px;
    text-align: left;
}
 
.mainHeader .logoArea p{
    position: relative;
    top: -100px;
   
}
 
.mainHeader .logoArea img{
    position: relative;
    top: -130px;
    left: 230px;
   
}
 
@media only screen and (min-width: 150px) and (max-width: 600px) {
    body{
    width: 100%;
}
   
    .mainHeader{
            padding: 0;
            background:#666;
            height:70px;
            width:80%;
        border-radius: 5px;
        position: relative;
        top: 150px;
        left: -70px;
        list-style-type: none;
    }
 
    .mainHeader nav ul li{
        text-align: center;
        height: 100%;
        word-break: break-all;
 
}
 
 .mainHeader nav ul li a{
        width: 100%;
        height: 20px;
        padding:  10px 5px;
        display: inline-block;
        margin: 10px;
       
}
 .mainInfo{
    background:white;
    height: 300px;
    width:80%;
    position: relative;
    top: 200px;
    left: -70px;
    border-radius: 5px;
    box-shadow: 10px 10px 10px #727272;
 
   
}
 
.mainInfo .miInfo{
 
}
 
 
}
<html lang="en">
    <head>
             <link rel="stylesheet" type="text/css" href="StyleSheet.css">
        <meta charset="utf-8" />
        <title>Website</title>
    </head>
    <body class="body">
        <header class="mainHeader">
           <div class="logoArea">
                <img alt="logo" src="logo.jpg" width="250px" height="120px">
            </div>
            <nav><ul>
                <li><a class="active" href="Index.html">Home<br/></a></li>
                <li><a href="About.html">About<br/></a></li>
                <li><a href="Random.html">Random</a></li>
            </ul></nav>
        </header>
 
        <div class="mainInfo">
            <div class="miInfo">
                <p>This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! </p>
            </div>
        </div>
 
    </body>
</html>

Upvotes: 0

Views: 42

Answers (1)

Derek Misler
Derek Misler

Reputation: 106

It's trying to wrap around .mainHeader nav ul. Take float:left; off of .mainHeader nav ul li and you should be all set.

Upvotes: 1

Related Questions