Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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.