Margins and image sizes

Question

I think I have followed step by step, but I cannot seem to figure out how to get the images down to 45%, so mine are still huge and overlapping. There is a rt side margin but no left, and no space between the images. Here is my CSS layout:

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

body {
  font-family:'Playfair Display', serif;
}

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

a {
text-decoration: none;
}

image {
  max-width: 100%;
}

/******************
HEADING
******************/

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

h1 {
  font-family: 'Oswald', 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;
}

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

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

/******************
PAGE: PORTFOLIO
******************/

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

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

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

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

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices*/
nav {
  background: #599a68
}

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

a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Could someone please help me? Thank you!

Answer 1 · 2017-01-31T18:57:35Z

January 31, 2017 6:57pm

Hi sean montgomery

Here's your CSS for the images:

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

img.gallery is a specific CSS selector that translates to "select all img tags that ALSO have the class gallery applied to them. There is no gallery class applied to any of your images. For example, here's the html for one of the gallery images:

 <img src="img/numbers-01.jpg" alt="">

In other words the style above won't work because the HTML is missing the class. For that CSS style to work you'd need to add class="gallery" to each image like this:

 <img src="img/numbers-01.jpg" alt="" class="gallery">

However, there's an easier way, but you need to change a bit of your HTML. For the unordered list (the <ul> tag) you have this code:

<ul id=".gallery">

You should not have a period before gallery in the HTML, instead it should be like this:

<ul id="gallery">

After you make that change, then change that one CSS style to look like this:

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

#gallery img is a selector that translates to "apply this style to all img tags inside another tag with the ID of gallery

That should get your project back on track. Let us know if that worked.

Answer 2 · 2017-01-27T01:07:14Z

January 27, 2017 1:07am

Wow, some complex stuff going on, let me try and help. First you see in HTML where you wrote <ul id=".gallery"> There should be no period before gallery and you should change the CSS to be #gallery and img#gallery instead. So here's the steps...

Change the HTML From <ul id=".gallery"> to <ul id="gallery"> Get Rid of the Period
You were right the first time it was gallery li not img gallery. So change the code in the CSS from: gallery to #gallery.

So this is what it will look like for the first part of the CSS:

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

Lastly, as I was saying, you were right with the li, so change gallery img.gallery to #gallery li. That second part of the CSS put together will be

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

Altogether it will be:

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

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

I know the concepts are tough I hope you understood why the changes happened so you can reuse and replicate the code!!!

Answer 3 · 2017-01-26T21:26:14Z

January 26, 2017 9:26pm

Well I'm not 100% because there's no HTML included, but I think there might be 2 problems. One is that you're selected lists instead of images to apply that 45% to. If you changed it img.gallery it might work. Another problem I see is that you aren't writing it as a class with the . before. I think it should be .gallery if I remember the project right. Am I correct on that and hope it helps!

Answer 4 · 2017-01-26T23:42:42Z

January 26, 2017 11:42pm

Thanks Michael. Here is my HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sean Montgomery | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald|Playfair+Display:400,400i" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>  
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Sean Montgomery</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">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="">
              <p>Experimentation with color and texture.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>This is an image of the number 2.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>It's the number 6.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>This is the number 9.</p>
            </a>  
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Just number 12.</p>
            </a>  
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/montymonty41"><img src="img/twitter-wrap.png" alt="twitter logo"></a>
        <a href="http://facebook.com/seancmont"><img src="img/facebook-wrap.png" alt="facebook logo"></a>
        <p>&copy; 2017 Sean Montgomery.</p>
      </footer>
    </div>  
  </body>  
  </html>

I changed the second part to img.gallery and the images went back to one column.

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

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

Where else should I add a period?

Welcome to the Treehouse Community

Looking to learn something new?

sean montgomery

sean montgomery

Margins and image sizes

4 Answers

Dave McFarland

Dave McFarland

sean montgomery

sean montgomery

Dave McFarland

Dave McFarland

Michael Lawinger

Michael Lawinger

Michael Lawinger

Michael Lawinger

sean montgomery

sean montgomery