Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Kayla Pasciullo
seal-mask
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points
Posted by Kayla Pasciullo
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points

why would some webpages on my site appear "zoomed in??"

I have completed my first website but have been struggling for weeks with my background/nav bar on 1/2 of my site

my home page and projects page look good, but my about page and contact page have the background image and nav bar appearing larger.. it looks like those two webpages are zoomed in??

has anyone seen this before?? ive tried playing with literally every line of code and nothing seems to fix it!! AHH

please look at my site and let me know if you have any ideas of how i can fix this!!

thank you SO much!!!

www.kaylapasciullo.com

SOME OF MY ABOUT PAGE CODE
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}
html {
  background-image: url('domenico-loia-hGV2TfOh0ns-unsplash.jpg');
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  background-position: center;
}

body, html {
  height: 100%;
}


<script src="jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="aboutstyles.css">
    <title>Kayla Pasciullo - Web Developer</title>
        <meta charset="UTF-8">
        <meta name="description" content="Freelance web developer">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Kayla Pasciullo">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  '''

3 Answers

Zaid Khan
Zaid Khan
12,769 Points
Zaid Khan
Zaid Khan
12,769 Points

Hi Kayla Pasciullo

Try this:

body, html{
       overflow-y: hidden;
}

It looks like the scroll bar on the about and contact page making the page look zoom in.

Kayla Pasciullo
seal-mask
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points
Kayla Pasciullo
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points

thanks for the idea!!! i really appreciate your help no such luck tho :( its the worst on my iphone 6plus which doesnt even show the scrollbar...

Kayla Pasciullo
seal-mask
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points
Kayla Pasciullo
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points

it must be a mistake in my HTML because even using an exact copy of my projects page stylesheet didnt change it... anyone see an error here??

<!DOCTYPE html>
<html>

<head>
    <script src="jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="aboutstylesNEW.css">
    <title>Kayla Pasciullo - Web Developer</title>
        <meta charset="UTF-8">
        <meta name="description" content="Freelance web developer">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Kayla Pasciullo">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
</head>

<body>
    <header>
        <nav>
            <ul class="nav-links">
                <li><a href="index.html">home</a></li>
                <li><a href="about.html">about</a></li>
                <li><a href="projects.html">projects</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="wrapper">
  <h1>meet Kayla</h1><br><h2>&lt;happiness hacker&gt;</h2>
    <img class="kayla" src="kayla2.jpeg" alt="image of kayla">
    <div class="main-content">
   <p style="line-height: 1.75;
    padding: 25px;
    margin: 25px;
    font-size: 18px;">
    I am a front end web developer living in the beautiful Okanagan Valley of B.C. Canada. My current focus is designing and coding functional, responsive landing pages for small or local businesses using HTML and CSS. I take pride in writing well designed, efficent code to build websites from concept all the way to completion. 
   <br><br>I am skilled in web programming, with an in depth knowledge of HTML and CSS. I am an agressive problem solver who loves a challenge. I am always looking to learn or try something new! When I am not busy coding I am usually hanging out with my friends or family at a lake, beach or if I am lucky at camp &hearts; 
<br><br>If your a business looking for a website, or an employer looking to hire <a href="mailto:kayla.pasciullo@hotmail.com">&#9993; email me</a></p>
   </div>
</div>
</body>
</html>

'''
Zaid Khan
Zaid Khan
12,769 Points
Zaid Khan
Zaid Khan
12,769 Points

Try setting max-width and height of nav-links. This will at least stop the contact page nav links from stretching.

.nav-links{
   max-width: 365px;
   max-height: 16px;
}
Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Hmmm ... not exactly sure. But you do have a duplicate <meta> which might affect the layout.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">