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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

My Gallary background is changing

I've just noticed that my Gallery page, upon resizing to go wider, the image background with links in them go wider than the pictures them selves. Has anybody else ran into this problem? If so how did you fix? Or how can I fix it.

Hi Timmy :)

Would it be possible for you to post a link to your workspace and keep your code open at your end and I can have a look for you :)

Thanks Craig

4 Answers

Hi Craig,

Thanks for the super fast reply. Sure. I am currently working as we speak, so it will remain open.

https://teamtreehouse.com/workspaces/4056572#

Unfortunately workspaces isn't playing ball ... sometimes it would let you though to the link so the only other way I can help if if you copy and past your code in on here..

If you have not done this before have a rwad of the "Markdown Cheatsheet" under the comment box to get you going!

Craig

/**************************************
GENERAL
***************************************/

body {
  font-family: 'Open Sans', sans-serif;
}


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

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}


/**************************************
HEADING
***************************************/
header{
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%; 
}


#logo {
  text-align: center;
  margin: 0;
}


/* Logo text */
h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}


/**************************************
NAVIGATION
***************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;

}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;

}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

/**************************************
FOOTER
***************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;

}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}


/**************************************
PAGE: PROGRAMMING
***************************************/

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

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

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


/**************************************
PAGE: ABOUT
***************************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

/**************************************
PAGE: CONTACT
***************************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.facebook a {
  background-image: url('../img/facebook.png');
}


/**************************************
COLORS
***************************************/

/* Site Body */
body {
  background-color: #fff;
  color: #999;
}


/* Green header */
header {
  background: #424242;
  border-color: #6E6E6E;
}


/* Nav background on mobiles */
nav {
  background: #6E6E6E;
}

/* Logo text */
h1, h2 {
  color: #fff;
}

/* Links */
a {
  color: #6ab47b;
}


/* Nav Link */
nav a, nav a:visited {
  color: #fff;
}

/* Selected nav link. */
nav a.selected, nav a:hover {
    color: #01DFD7;
 }

Thanks Timmy!

Your code is the same as mine from when i did the course so I can only think that the issue lies within the HTML...

Here is how my list items look in html .......

                <li>
                    <a href="img/numbers-01.jpg">
                        <img src="img/numbers-01.jpg" alt="">
                        <p>playing with blending modes in Photoshop</p>    
                    </a>
                </li>

However this is the only other code that effect them element regarding width and it is situated within the "responsive.css"

    #gallery li {
        width: 28.3333%;
    }

    #gallery li:nth-child(3n) {
        clear: left;
    }

I hope this manages to point you in the direction of the issue Timmy!

Craig

Ok I found the solution, it was actually in the responsive.css file. I spelt Gallery like this ' Gallary ' instead of gallery. I've fixed the problem now .. but thank you for your help :)

No Problem Happy Coding !!