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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Favour Uche
Favour Uche
3,551 Points

the third picture on my portfolio on mobile version is not stacked correctly

after adding the view port tag, I tried opening the website in my phone but the third picture on my portfolio is moved to the far right . so it is supposed to be 2 pictures side to side but in the second row, it has only one picture because the third picture is pushed on the far right. Can anyone help me with this please :(

Favour Uche
Favour Uche
3,551 Points 
@media screen and (min-width: 480px) {

  /**********************************
  TWO COLUMN LAYOUT
  ***********************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }




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

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(3n+1) {
    clear: left;

  }



  /**********************************
  PAGE: ABOUT
  ***********************************/

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}

@media screen and (min-width: 660px) {

  /**********************************
  HEADER
  ***********************************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #8B0000;
    margin-bottom: 60px;
  }


}

That is my responsive css

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I'd probably need to see the HTML, or a link to somewhere where you have published the code you've done so far. But if the images are being pushed to new rows etc then it's probably because the browser doesn't have enough space on the screen to display them where you want.

Remember each element on the DOM has to account for border width, margin space, padding space as well as the space of the element itself.

What I tend to do at times like this is to open the browsers DevTools, examine the elements and test the width values that will display the elements properly.

Hoping this helps you.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It seems to be as I suspected. Some of the text is pushing your subsequent list elements down and the browser is doing the best it can to make space. That's why it looks like there's nothing there where the third image should be.

I got around this by adding a specific height e.g. 40px to the following selector.

#gallery li a p { 
}

You may also have to look at your individual images and make sure they're all the same size. It might be that that needs tweaking or that something in the CSS is causing some of the images to vary in the sizes that they're displaying.

Good luck with it. 😊

Favour Uche
Favour Uche
3,551 Points

so I don't know how to thank you but i'm really grateful. the text from the first cake picture was too long so it pushed the third picture out. I just erased the text and added a shorter text and it worked like magic. Thank you so much for taking your time to respond.