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

HTML How to Make a Website Adding Pages to a Website Add a New Page

Posted by Dennis Pilat
Dennis Pilat
2,115 Points

Gallery photos too large

For some reason, if you've been following the series. My gallery photos are way to big now for some reason. They are contained...

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

img  {
    max-width: 100%;
}

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #a0b4b8;
}

Here is an image: http://i.imgur.com/ouF4pul.jpg

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Edited this post for syntax formatting.

Dennis please post your HTML code.

Austin Dsilva
Austin Dsilva
2,516 Points

Hi Denis,

From what you have posted above, I noticed that the id selectors are missing their respective id "#" symbols. eg. wrapper needs to read as #wrapper and gallery as #gallery. Not including the # next to id will make it difficult for your HTML to render CSS author styles.

eg. id="wrapper" in HTML corresponds to #wrapper in CSS

Hope this works.

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Austin Dsilva if you think you have the answer for the asked question don't fear to write it in the "Answer" section.

But to add to your comment: you would be right if the # (hashtag) was missing, but it's there.

That's why I requested the HTML from him to see if he's using the right tags.

3 Answers

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi Dennis Pilat .

<head>
    <meta charset="utf-8">
    <title> Dennis | Designer </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Josefin+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
    <header>
        <a href="index.html" id="logo">
            <h1>Dennis </h1>
            <h2>Designer</h2>
        </a>
        <nav>
            <ul">             // <----------- This is a problem remove " 
                <li><a href="index.html" class="selected">Portfolio</a></li>
                <li><a href="about">About</a></li>
                <li><a href="contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
    <section>
        <ul id="gallery">
            <li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg" alt="It's an image that shows the number 1!">
                <p>First place!</p>
                    </a>
                        </li>
            <li><a href="/img/numbers-02.jpg"><img src="img/numbers-02.jpg" alt="It's an image that shows the number 2!">
                <p>Second place!</p>
                    </a>
        </ul>
    </section>
    <footer>
        <a href="https://www.facebook.com/xomgitsdnicex"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></img></a>
        <p>&copy; 2015 Dennis .</p>
    </footer>
    </div>
    <script src="scripts.js"></script>

If you check your code on line 17 where you open the ul tag you have a ul" -> remove the " and see if it works the way you want it to.

Happy Coding!!!

Dennis Pilat
Dennis Pilat
2,115 Points

Thank you :)

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

@Denis Pilat

You are welcome. Just a quick tip: if you are designing a website and you are 99% sure that the CSS is as it supposed to be then it doesn't hurt to check your HTML.

A good start would be a text editor that provides colour schemes.

You should check Brackets or maybe Atom.

Both are good and you can modify them pretty much to your liking and you can get a lot of add-ons.

Austin Dsilva
Austin Dsilva
2,516 Points
Austin Dsilva
Austin Dsilva
2,516 Points

Nejc Vukovic just saw the edited syntax formating. I agree, html source will give better idea.

Dennis Pilat
Dennis Pilat
2,115 Points
Dennis Pilat
Dennis Pilat
2,115 Points

@Nejc Vukovic <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Dennis | Designer </title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Josefin+Sans:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">

</head>
<body>
    <header>
        <a href="index.html" id="logo">
            <h1>Dennis </h1>
            <h2>Designer</h2>
        </a>
        <nav>
            <ul">
                <li><a href="index.html" class="selected">Portfolio</a></li>
                <li><a href="about">About</a></li>
                <li><a href="contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
    <section>
        <ul id="gallery">
            <li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg" alt="It's an image that shows the number 1!">
                <p>First place!</p>
                    </a>
                        </li>
            <li><a href="/img/numbers-02.jpg"><img src="img/numbers-02.jpg" alt="It's an image that shows the number 2!">
                <p>Second place!</p>
                    </a>
        </ul>
    </section>
    <footer>
        <a href="https://www.facebook.com/xomgitsdnicex"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></img></a>
        <p>&copy; 2015 Dennis .</p>
    </footer>
    </div>
    <script src="scripts.js"></script>

</body> </html>