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

Posted by mrx3
mrx3
8,742 Points

Need some help with DRY (Don't Repeat Yourself) in my CSS code please.

I'm having some trouble wrapping my head around some CSS and a website I made. I have some repeated code starting on line 115-166. I'll paste my code pen below. I have two images that I'm trying to float, one left, and one right. I would like to condense my code so I don't repeat myself like Guil says. Can anyone take a look and help eliminate the code I've repeated in lines 115-116? Thanks in advance for any help, which would be greatly appreciated. You won't be able to see the images but, you will be able to see the repeated code that I'm trying to eliminate.

Codepen: http://codepen.io/mike316/pen/aryAo

1 Answer

Sreng Hong
Sreng Hong
15,083 Points

Hi Mr. X!!! I have changed your css code into this. I think it's less repeated than the one you did before.

Here is a code, but you add the class name gallery to your both class name galleryone and gallerytwo in your html code. It shoulb be like this: class = "galleryone gallery" and class = "gallerytwo gallery". Hope this help.

img {
  max-width: 100%;
}

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

.gallery li {
  border: 2px solid black;
  width: 45%;
  margin: 2.5%;
  color: #F5DEB3;
}

.galleryone li {
  background-color: #FFE4C4;
  float: left;
}

.gallerytwo li {
  background-color: #FFDEAD;
  float: right;
}

.gallery li a {
  text-decoration: none;
}

.gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1em;
  color: #000;
  text-align: center;
}
mrx3
mrx3
8,742 Points

Sorry for the late reply it's been a hectic labor day with all the beer around here. Thank you so much for your help, and this looks great.