A help with a fix to my portfolio site

Hey all,

Yesterday I completed my portfolio site and turned it in. I went to codepen on my phone and looked at my project on my phone and the images were stacked on top of each other on the small screen with a big gap between the 2 color blocks. I want my images to look good on all screen sizes.

Here is my pen: https://codepen.io/DARRIN1985/pen/QMZQaO

Can someone help me make these images show up nicely on all screens? Every other section seems ok.

You have to use media queries in your CSS file in order to display images in smaller screens the way you want. It’s also a good idea to use the viewport meta tag in the <head> tag of your HTML file.

1 Like

You need to implement bootstrap’s grid system better.
Try to replace your images with this:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="..." alt="...">
      </div>
    </div>
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="..." alt="...">
      </div>
    </div>
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="..." alt="...">
      </div>
    </div>
    <div class="col-md-3">
      <div class="thumbnail">
        <img src="..." alt="...">
      </div>
    </div>
  </div>
</div>

Just replace dots from img src with your links.
This will distribute your four image across equally on medium an larger size screens, and on small screens it will automatically stack images bellow each other.
If you want your images to be two across on tablets and on larger screens four across the layout would be like this:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-3">
      <div class="thumbnail">
        <img src="..." alt="...">
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="thumbnail">
        <img src="..." alt="...">
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="thumbnail">
        <img src="..." alt="...">
      </div>
    </div>
    <div class="col-md-6 col-lg-3">
      <div class="thumbnail">
        <img src="..." alt="...">
      </div>
    </div>
  </div>
</div>

To understand better i recommend watching this video.
You can also do this with media queries, but i think it will be hard for beginner to dive right into media queries. And that’s where bootstrap comes in handy.

Thanks!

I did some fixes and rebuilt the site. It’s looking a lot better and the code is more organized.

Let me know what you guys think: https://codepen.io/DARRIN1985/pen/LjMVEB

I’m having trouble centering everything across all devices, but it looks about the same.

You have 4 col-sm-2, and in total you get 8 units in length, but bootstrap grid is made of 12 units per row. So you need to fill that gap of 4 units. What you can do is to replace col-sm-2 with col-sm-3, then you will have 4 col’s * 3 = 12 then your row will be full length. And after that everything should be nicely centered.