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

Fedor Andreev
Fedor Andreev
6,438 Points
Posted by Fedor Andreev
Fedor Andreev
6,438 Points

Difficulty resizing my page? HELP?

How can I make my page resize smoothly. I've tried all media inquires codes, none of them worked.

This is what I want: scale down the window and have the whole webpage scale down with it, so that the margins on the left and right stay the same until the window becomes too small. All scales need to be fixed, no floating.

HTML CODE

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" href="CSS/Index.css">
</head>
<title>
    Another New Generic App
</title>
<header>
    <div class="OrangeHeader">
        <div class="GenericApps">
        GENERIC APPS
        </div>      
        </div>
        <div class="links">
            <a href="www.google.com">HOME
            <a href="www.google.com">APPS
            <a href="www.google.com"><span>ABOUT US</span>
            <a href="www.google.com">BLOG
            <a href="www.google.com"><span class="EnglishItalian">CONTACT
            <img class="SearchImage" src="img/Search.png">
            <a href="www.google.com"><span class="EngItalFont">ENGLISH</span>
            <a href="www.google.com"><span class="EngItalFont">ITALIANO</span></span>
    </div>
</header>

<body>
    <img src="img/MainPicture.png">
    <img id="Thunder" src="img/Thunder.png">
    <div class="Line1">
    <img class="TheRightStuff" src="img/RightStuff.png">
    <img class="Design" src="img/Design.png">
    <img class="Development" src="img/Development.png">
    </div>
    <h1 class="TheRightStuffTitle">The Right Stuff
    </h1>
        <p class="TheRightStuffParagraph">"Lorem ipsum dolor sit amet, consectetur<br> 
        adipisicing elit, sed do eiusmod tempor<br> incididunt ut
        labore et dolore magna aliqua.<br> Ut enim ad minim veniam"</p>
    <h1 class="DesignTitle">The Right Stuff
    </h1>
        <p class="DesignParagraph">"Lorem ipsum dolor sit amet, consectetur<br> 
        adipisicing elit, sed do eiusmod tempor<br>  incididunt ut
        labore et dolore magna aliqua.<br>  Ut enim ad minim veniam"</p>
        <h1 class="DevelopmentTitle">The Right Stuff
    </h1>
        <p class="DevelopmentParagraph">"Lorem ipsum dolor sit amet, consectetur<br> 
        adipisicing elit, sed do eiusmod tempor<br>  incididunt ut
        labore et dolore magna aliqua.<br>  Ut enim ad minim veniam"</p>
    <div class="Line2">
    <img id="GreenIconLeft" src="img/GreenIcon.png">
    <img id="GreenIconCenter" src="img/GreyIcon.png">
    <img id="GreenIconRight" src="img/GreyIcon.png">
    <h1 class="UploadTemplate">Upload Template</h1>
    <img class="DesignLogo" src="img/DesignLogo.png">
    <h1 class="Publish">Publish</h1>
    <h1 class="BrowseFiles">Browse Files</h1>
    <h1 class="SignUp">Sign up here for free updates.</h1>
    <div class="Browse">
        <a class="BrowseText">Browse
        </a>
    </div>
</body>
<footer>
    <a href="www.google.com"><img class="GooglePlus" src="img/googleplus.png"></a>
    <a href="www.google.com"><img src="img/Twitter.png" class="TwitterIcon"></a>
    <a href="www.google.com"><img src="img/Facebook.png" class="FacebookIcon"></a>
    <a href="www.google.com"><img src="img/Basketball.png" class="BasketballIcon"></a>
    <a href="www.google.com"><img src="img/Blogger.png" class="BloggerIcon"></a>
    <li>
        2013 Andreev. All Rights Reserved.
        <a href="www.gmail.com"><img class="EmailIcon" src="img/Email.jpg"></a>
        <a href="mailto:Fedor@example.com">Fedor@example.com</a>
    </li>
</html>

html {
margin-top: 100px;
background-image:url('../Wallpaper/Background.png');
}

header {
    margin-top: -8px;
    width: 657px;
    height: 50px;
    background-color: white;
}

.OrangeHeader {
    height: 11px;
    width: 46px;
    margin-left: 99px;
    position: relative;
    background-color: #ea6753;
}

.GenericApps{
font-size: 8px;
color: #909090;
margin-top: 50%;
width: 59px;
left:-5px;
position: absolute;
}

.links {
    margin-left: 253px;
    word-spacing: 14px;
    margin-top: 1%;
}

a {
    text-decoration: none;
    color:#909090;
    font-size:8px;
}

a:hover {
    color: black;
}

span {
    word-spacing: 1px;
}

.EnglishItalian {
    word-spacing: 82px;
}

.EngItalFont {
    font-size:7px;
}

.SearchImage {
    width: 9px;
    height: 9px;
    margin-left: -30px;
    margin-right: -67px;
}

body {

    height: 890px;
    width: 657px;
    background-color:white;
    margin: 0;
    margin-top: 90px;
    margin-left: 30%;
    padding: 0
}

.TheRightStuff {
    margin-top: -9%;
    margin-left: 16%;
    position: absolute;
}
.Design {
    margin-top: -11%;
    margin-left: 42%;
    position: absolute ;
}

.Development {
    margin-top: -9%;
    margin-left: 70%;
    position: absolute ;
}

#Thunder {
    margin-left: 132px;
    margin-top: 7px;
    margin-bottom: -50px;
}

#GreenIconLeft {
    margin-left: 136px;
    margin-top: -11px;  
}

#GreenIconCenter {
    margin-left: 161px;
    margin-top: -11px;
}

#GreenIconRight {
    margin-left: 161px;
    margin-top: -11px;
}


.TheRightStuffTitle {
    margin-left: 99px;
    color: black;
    margin-top: 50px;
}

.TheRightStuffParagraph {
    margin-left: -345px;
    text-align: center;
    color: grey;
}

.DesignTitle {
    color: black;
    margin-left: 279px;
    margin-top: -82px;
}

.DesignParagraph {
    color: grey;
    margin-left: 8px;
    text-align: center;
}

.DevelopmentTitle{
    color: black;
    margin-left: 460px;
    margin-top: -82px;
}

.DevelopmentParagraph{
    color: grey;
    margin-left: 370px;
    text-align: center;
}

.Line1 {
    background-color: #dedfe1;
    height: 1px;
    width: 100%;
    margin-top: 108px;
    position: relative;
}
.Line2 {
    background-color: #dedfe1;
    height: 1px;
    width: 100%;
    margin-top: 30px;
}

.UploadTemplate {
    margin-left: 91px;
    margin-top: 50px;
    color: black;
}

.DesignLogo {
    margin-left: 268px;
    width: 130px;
    height: 79px;
    margin-top: -70px;
}

.Publish {
    margin-left: 494px;
    margin-top: -47px;
    color: grey;
}

.BrowseFiles {
    margin-top: 70px;
    margin-left: 180px;
    font-size: 11px;
    opacity: 0.6;
}

.SignUp {
    font-size: 8px;
    opacity: 0.6;
    margin-left: 180px;
}

.Browse {
    margin-left: 410px;
    margin-top: -40px;
    background-color: #00987f;
    width: 78px;
    height: 24px;

}

.BrowseText {
    font-size: 12px;
    line-height:12px;
    margin-left: 25%;
    color: white;
}
footer{
    margin-left: 27%;
    margin-top: -140px;
}

li {
    list-style-type: none;
    margin-left: 50px;
    font-size: 9px;
    text-decoration:none;
}

.GooglePlus {
    margin-top: 205px;
    margin-left: 80px;
}

.TwitterIcon {
    margin-bottom: 3px;
}

.FacebookIcon {
    margin-bottom: 1px;
}

.BasketballIcon {
    margin-bottom: 3px;
}

.BloggerIcon {
    margin-bottom: -2px;
}

.EmailIcon {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    margin-right: 5px;
    margin-left: 5px;

}

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

    body {
        width: 292px;
        margin-right: 200px;
    }

    img {
        width: 292px;
    }

    header {
        width: 50px;
    }

    p {
        font-size: 15%;
    }

    li {
        margin: 25%;
    }

    div {
        max-width: 1%;
        max-height: 1%;
        }

    footer {
        max-width: 1%;
        max-height: 1%;
    }
}

1 Answer

Geert-Jan Hendriks
Geert-Jan Hendriks
23,126 Points
Geert-Jan Hendriks
Geert-Jan Hendriks
23,126 Points

First of all, you have some errors in your HTML. The footer has no closing tag </footer> and your body tag should come directly after the </head> tag. And there are other errors. Some links are missing the closing </a> tag. Try to validate your code with the validator from the W3C: http://validator.w3.org/

When you have fixed your HTML you can look at your CSS.