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 trialTimmy Showler
Courses Plus Student 867 PointsMy 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.
4 Answers
Timmy Showler
Courses Plus Student 867 PointsHi Craig,
Thanks for the super fast reply. Sure. I am currently working as we speak, so it will remain open.
Craig Watson
27,930 PointsUnfortunately 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
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
27,930 PointsThanks 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
Courses Plus Student 867 PointsOk 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
27,930 PointsNo Problem Happy Coding !!
Craig Watson
27,930 PointsCraig Watson
27,930 PointsHi 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