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

Posted by Timmy Showler
Timmy Showler
Courses Plus Student 867 Points

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.

Craig Watson
Craig Watson
27,930 Points

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

Timmy Showler
PLUS
Timmy Showler
Courses Plus Student 867 Points
Timmy Showler
Timmy Showler
Courses Plus Student 867 Points

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#

Craig Watson
Craig Watson
27,930 Points

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

Timmy Showler
PLUS
Timmy Showler
Courses Plus Student 867 Points
Timmy Showler
Timmy Showler
Courses Plus Student 867 Points 
/**************************************
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;
 }
Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

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

Timmy Showler
PLUS
Timmy Showler
Courses Plus Student 867 Points
Timmy Showler
Timmy Showler
Courses Plus Student 867 Points

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 :)

Craig Watson
Craig Watson
27,930 Points

No Problem Happy Coding !!