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 Emily Lemmon
Emily Lemmon
8,358 Points

Photo sizing leaving gaps

I am using 4 pictures in my gallery. Three of them are 'landscape' (wide) and one is 'portrait' (tall). It looks like my code is running properly, but I've noticed that the portrait-style picture is causing a gap, probably because the ratio is different than the rest of the pictures. When the browser window is wide (or even what I would consider normal mobile size), the picture that should be beside the 'portrait' on the right pops down below it, slipping back to the left, leaving a gap beside the 'portrait' style picture, and also a gap beside the other picture since it is last in the series.

When I shrink my browser window enough, it gets back together.

As I said, I am pretty sure this is an issue more with the fact that I am using differently shaped pictures. But is there a way to control this effect other than always using pictures of the same size (or at least same aspect ratios)?

Thanks!

Here is the code:

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

a {
 text-decoration: none; 
}

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

body {
  font-family: 'Love Ya Like A Sister', serif;
}

img {
 max-width: 100%;
  }

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

h1 {
  font-family: 'Open Sans', sans-serif;
  margin: 15px, 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: .8em;
}

h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: .75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/***************************
LOGO
***************************/

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


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

a {
  color: #6ab47b;
}

header {
 background:  #6ab47b;
 border-color: #6ab47b;
}

h1, h2 {
 color: #fff; 
}

nav {
background: #599a68;
}

nav a, nav a:visited {
  color: #fff;
}

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

body {
 background-color: #fff;
 color: #999;
}

/********************************
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: PORTFOLIO
***************************/
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

AND the html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Emily Lemmon | Writer</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister|Open+Sans" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>
   <body>
    <header>
      <a href="index.html" id="logo">
    <h1>Emily Lemmon</h1>
      <h2>Writer</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="gallery/shisofall.jpg">
              <img src="gallery/shisofall.jpg" alt="Shiso in autumn.">
              <p>Shiso, Hyogo, in autumn.</p>
            </a>
          </li>

          <li>
            <a href="gallery/shisospring.jpg">
              <img src="gallery/shisospring.jpg" alt="Shiso in spring.">
              <p>Shiso, Hyogo, in spring.</p>
            </a>
          </li>
          <li>
            <a href="gallery/Shisosummer.jpg">
              <img src="gallery/Shisosummer.jpg" alt="Shiso in summer.">
              <p>Shiso, Hyogo, in summer.</p>
            </a>
          </li>
          <li>
            <a href="gallery/shisowinter.jpg">
              <img src="gallery/shisowinter.jpg" alt="Shiso in winter.">
              <p>Shiso, Hyogo, in winter.</p>
            </a>
          </li>         
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/emlem"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
        <a href="http://facebook.com/emlem429"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
        <p>&copy; 2017 E. C. Lemmon</p>
      </footer>
     </div>
  </body>
</html>

The portrait style picture is Shisosummer.jpg.

1 Answer

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Hi Emily,

There is always a way.

The best current direction (at this time and point, until CSS Grid Layout is better supported, feel free to also check out CSS tricks: A complete guide to Grid) I can give you is JavaScript. Check out Masonry and I'm sure there are and will be many more.

Hope this helps and always keep your eye on caniuse.com!

Emily Lemmon
Emily Lemmon
8,358 Points

Thank you! I'm still very beginner-y, but I will definitely be looking into these kinds of things as I go along, too. Thanks for the resources!