CODEWITHSUNDEEP
htmlcss
Ralphunreal
Ralphunreal

Reputation: 193

nav is not the same width for mobile view in one particular page

I made a nav for mobile view and it looks fine on two out of three pages. It's full 100% width like i put but then on one page it is not the same, it is even more and the page looks off with a bigger nav for some reason. Not sure why it is happening since css should apply to each page and i did check the html to make sure the links are there.

the website is: http://rafaelc.comeze.com/

the issue is on the contact section only in mobile view[responsive] you wil notice that you can scroll sideways since there is extra space for some reason.

<!DOCTYPE html>

<html lang="en">
<head>
<title>Rafael Caba</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
</head>

<body>

<header class="main_header">
<div class="header_wrapper">
<p class="main_title"><a href="index.html">Rafael Caba</a></p>
    <nav class="main_nav">
        <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
    </div>
</header> <!-- end of header -->

<div class="container">

<section class="contact_content">
    <article>
        <p class="contact_title">Contact</p>
        <p class="about_name">Rafael Caba</p>
        <p class="about_webdev">Web Developer</p>
        <p class="about_webdev">New York, NY</p><br>
        <p class="about_email"><span>Email:</span> <a href="mailto:[email protected]">[email protected]</a></p>
    </article>
</section> <!-- end of section -->

</div> <!-- end of container -->

<footer>
<div class="footer_wrapper">
    <ul>
        <li><a href="index.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
</footer> <!-- end of footer -->

</body>
</html>


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

    .container{
        width:100%;
    }

    .main_header{
        width:100%;
    }

    .main_nav{
        background:#000000;
        width:100%;
        margin:0;
        height:80px;
    }

    .header_wrapper{
        width:100%;
        }

    .main_content{
        width:100%;
    }

    .about_content article{
        width:90%;
        margin:10px;
    }

    .contact_content article{
        margin:10px;
    }

}

Upvotes: 1

Views: 38

Answers (2)

Karthik N
Karthik N

Reputation: 535

Ralph,

In style.css code, you have width:960px for both .header_wrapper (line no 35) and .container (line no 11).

It will display for all your resolution. So that the horizontal scroll bar displays. To overcome this issue, you have to write, media screen css

For Ex:

@media screen and (min-width:361px) and (max-width:480px){
.header_wrapper, .container{width:90%;}
}

It will have the width as 90% for both .header_wrapper and .container in the mobile devices having the width in between 361px and 480px; Hope you got it...

Comments are welcome Karthik N

Upvotes: 0

neo108
neo108

Reputation: 5244

Add the following to @media screen and (max-width:959px)...

.contact_content{
    width:100%;
}

and add width: 90% to .contact_content article in @media screen and (max-width:640px) block. So the declaration will be...

.contact_content article{
    width: 90%;
    margin:10px;
}

This should fix the horizontal scrolling in the contact page.

I recommend using one of the frameworks for building responsive websites. It is much easier. A couple to name are...

Good Luck!

Upvotes: 1

Related Questions