Images moving upon scaling.

Question

Ok, so When I reach the tablet breakpoint in my viewport the li elements containing the images, p tags and headlines are jumping a little. I'm trying to center them on the page in 2 rows of 3 when at a tablets viewport, single when at phone, and 3 rows of two at desktop I haven't reached desktop yet as you can tell cause I'm stuck on this. Thanks in advance.

<!DOCTYPE html>
<html>
<head>
  <title>Jer1ah Bowers</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Spectral" rel="stylesheet">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<header>
    <h2 id="title">Jer1ah Bowers</h2>
    <div id="navWrap">
        <nav class="navlist">
          <li><a href="#home">Home</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </nav>
    </div>
</header> <!--end nav-header-->

 <div id="home">
    <img src="images/responsive-layout-profile.png" alt="Picture">
      <p>Hello there! My name is Jeriah, I am currently a front-end developer in training. I've been taking courses at TreeHouse for 5 months now, and hopefully soon enough I'll finish my tech degree and can continue pursuing my dream.</p>
 </div> <!--end main-heading-->

<div class="wrapper clearfix">
        <h2>Portfolio</h2>
      <ul id="gallery">
            <li><img src="images/portfolio-1.png" alt="Marketing Page"><h3>Marketing Page</h3><p>This project shows the front page of a marketing website for a specific bussiness I'm interested in.</p>
            </li>
            <li><img src="images/portfolio-2.png" alt="Search Page"><h3>Search Page</h3><p>This project searches thru a specific database to find information that the user is trying to look up.</p></li>
            <li><img src="images/portfolio-3.png" alt="Travel App"><h3>Travel App</h3><p>This app compares travel times based on different transportation methods and tells you  the best one.</p></li>
            <li><img src="images/portfolio-4.png" alt="Map Of Favorite Spots"><h3>Map Of Favorite Spots</h3><p>This project uses mapping apis to plot points for my favorite spots in the city for a do it yourself walking tour!</p></li>
            <li><img src="images/portfolio-5.png" alt="Photo Gallery"><h3>Photo Gallery</h3><p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos</p></li>
            <li><img src="images/portfolio-6.png" alt="Calculator"><h3>Calculator</h3><p>Someone can enter in the numbers they want, and press the big blue button to see the results.</p></li>
      </ul>
</div> <!--end wrapper div-->

<div id="contact">
    <h3>Contact</h3>
    <p>If you're interested in chatting or want any more information about what I've been working on, I'd love to hear from you!</p>
    <div id="info">
        <p>Phone <b class="number">980-622-1490</b></p>
        <p>Email <b class="email">jeriah97bowers@yahoo.com</b></p>
    </div> <!--end info div-->
</div> <!--end contact div-->
    <hr>
<footer>
    <div id="bottomNav">
      <div class="footr">
        <a href="https://www.facebook.com/Jman197"><h3 class="left">Jer1ah Bowers</h3></a>
        <a href="#home"><h3 class="right">Back To Top</h3></a>
      </div>
        <div class="navBottom">
            <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
        </div> <!--end navBottom div-->
    </div> <!--end bottomNav div-->  
</footer>

</body>
</html>

body {
    background-color: #f2f4f7;
    margin: 0;
    font-family: 'Spectral', serif;
}

p {
    font-size: 1.2em;
}

a {
    text-decoration: none;
    color: black;
}

ul li {
    list-style-type: none;
}

/*Home Styling*/


#home {
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

 #home img {
    width:  85%;
    margin: 1.5em 0em;
    margin-top: 3em;
}

#home p {
    font-size: 1.2em;
    margin-bottom: 3em;
}

/*Nav Styling*/

.navlist li {
   font-size: 1.5em;
   list-style: none;
   padding: 0.7em;
   margin-top: 0.3em;
   text-align: center;
   background: white;
}

header h2 {
    text-align: center;
}

#navWrap {
    max-width: 90%;
    margin: auto;
}


/*Portfolio Styling*/

.wrapper {
    max-width: 100%;
    margin: 0;
    background-color: white;
}

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

#gallery h3 {
    font-size: 1.4em;
}

#gallery img {
    max-width: 100%;
}

#gallery li {
    max-width: 90%;
    text-align: center;
    margin: auto;
    padding-top: 1em;
}

.wrapper h2 {
   text-align: center;
   padding-bottom: 1em;
   padding-top: 2em;
}

#gallery li:nth-last-child(1) {
   padding-bottom: 3em;
}

#gallery p {
    max-width: 88%;
    margin: auto;
    margin-bottom: 1em;
}

/*Contact Styling*/

#contact {
    text-align: center;
    max-width: 95%;
    margin: auto;
}

#contact h3 {
    font-size: 1.5em;
    padding-top: 1.5em;
    padding-bottom: 0.7em;
}

#info {
    margin-top: 2em;
    margin-bottom: 4em; 
}

.number, .email {
    margin-left: .5em;
}


/*Footer Styling*/


.left {
    float: left;
    margin-left: 1.5em;
}

.right {
    float: right;
    margin-right: 1.5em;
}

.navBottom {
    list-style-type: none;
    display: none;
}

/*Media Queries*/

@media (min-width: 768px) {

   /*Home/Nav List Styles*/

   #home {
        margin: 1em;
        margin-top: 2em;
        display: inline-block;
        max-width: 95%
    }

    #home img {
        max-width: 48%;
        float: right;
        margin: auto;
    }

    #home p {
        max-width: 48%;
        float: left;
        margin: auto;
        text-align: left;
}

    .navlist li {
        display: inline-block;
        background-color: #f2f4f7;
        padding: 0;
        margin: .7em;

    }

    .navlist {
        text-align: center;
    }


    /*Portfolio Styling*/


    #gallery li {
     display: inline-block;
     max-width: 40%;

    }

    #gallery img {
        max-width: 95%;
    }

    .wrapper {
        text-align: center;
    }



    /*Contact/Footer Styles*/

    #contact p {
        max-width: 75%;
        margin: auto;
    }

    .right {
        display: none;
    }

    .navBottom {
        display: block;
        width: 45%;
        float: right;
        margin: auto;
    }

    .navBottom ul {
        text-align: center;
    }

    .navBottom li {
        display: inline-block;
        margin-right: 1.3em;
        font-size: 1.2em
    }

    .footr {
        width: 45%;
        float: left;
        text-align: center;
    }


    @media (min-width: 1024px) {

    }      



/*ClearFix*/

  .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Answer 1 · 2017-06-16T04:08:58Z

June 16, 2017 4:08am

Hi there!

Good job - you're really close, it's litterally 1 value to set in your li rule.

What's happening is that by default everything in your li elements aligns themselves with the baseline of their parent. As you adjust the width of the viewport, so too the width of the li elements changes (because they're set to to a relative width) and the text wraps to fill the space. As each caption has a different amount of text in it, they take up different amounts of height at the same width. Finally because the vertical align comes from the bottom, the text is pushing the image element up different amounts in each column.

To fix it, just add the "vertical-align: top;" property to your css rule for li elements where necessary.

One other piece of advice - it's best not to think of the "tablet" viewport, the "smartphone" viewport, etc, especially not as strictly as 768px means it's now tablet time. Yes most tablets are 768 px and over (most ipads actually use 4 screen pixels to 1 css pixel in browser to achieve this), but you can't rely on it. For example the first microsoft surface pro tablet has a viewport width of 720px, and many 8" windows/android tablets from a few years ago have viewport widths of 600px. It's fairly likely that your "mobile" layout will be looking pretty stretched out by 720px if it's only optimised for ios viewport widths at 320px, 480px, 768px.

It's best to get into the habit of setting your break points specific to each page - start off at the minimum width your browser will allow, and keep growing the width until something doesn't work, then add a media query and change it. Finally if you've added a lot of media queries and some of them are pretty close, group them into a middle ground. Of course we test how it looks in device emulators like those in chrome's dev tools, but make that the last step - I'd advise against designing a webpage to a specific device.

Hope it helps :)

Welcome to the Treehouse Community

Looking to learn something new?

Jeriah Bowers

Jeriah Bowers

Images moving upon scaling.

1 Answer

Jon Mirow

Jon Mirow

Jeriah Bowers

Jeriah Bowers