Help with Portfolio! ( I am failing so hard :( )

1

Ok firstly here’s the link to what I have so far: https://codepen.io/SarahTheTomboy/pen/OjorMe?editors=1100

I have been working all night but can’t figure out for the life of me how to get the rows of images under my portfolio (you know the ones you put snapshots of your work in and when you click them it goes to your project. I need 2 rows of 3.

It’s driving me insane, I feel like I am on this forum everyday asking for help like i can’t figure it out for myself, coding just doesn’t click with me :frowning: but I enjoy it.

I have tried putting images in but i float-right, float-left, use margins and padding but i can’t seem to get it too work

2

Use the bootstrap grid method.

So you want 2 rows and in each row you want 3 columns to give you 6 spaces? A single big column using the bootstrap grid method is made up of “12”. So if you want 3 columns, you divide 12 by 3 = 4. If you just wanted 2 columns, it would be 6 and 6.

<div class="row">

<div class="col-sm-4">
INSERT CONTENT HERE
</div>
<div class="col-sm-4">
INSERT CONTENT HERE
</div>
<div class="col-sm-4">
INSERT CONTENT HERE
</div>

</div>

<div class="row">

<div class="col-sm-4">
INSERT CONTENT HERE
</div>
<div class="col-sm-4">
INSERT CONTENT HERE
</div>
<div class="col-sm-4">
INSERT CONTENT HERE
</div>

</div>
3

I don’t see any images in your pen at the moment; also, you should remove the fixed height from your about section (and any others fixed height you have; use padding to make “extra space”), otherwise the image will cover your next section at smaller resolution.

Anyway, you want a two rows with three images each, right? That’s fairly easy with Bootstrap (which you are using). The Bootstrap grid system is based on 12 columns for each row and Bootstrap also gives you classes to assign how many columns a div will occupy.

You can do it like this:

  <div class="pagethree container-fluid text-center p-5">
      <div class="row">
        <div class="col-12">
          <h1 class="portfoliotitle" id="portfolio_jumplink"> Portfolio</h1>
        </div>
        <div class="col-md-4 col-12">
          <img class="img-fluid" src="your_image">
        </div>
        <div class="col-md-4 col-12">
          <img class="img-fluid" src="your_image">
        </div> 
        <div class="col-md-4 col-12">
          <img class="img-fluid" src="your_image">
        </div>        
        <div class="col-md-4 col-12">
          <img class="img-fluid" src="your_image">
        </div>
        <div class="col-md-4 col-12">
          <img class="img-fluid" src="your_image">
        </div> 
        <div class="col-md-4 col-12">
          <img class="img-fluid" src="your_image">
        </div>          
     </div>
   </div>

The classes I was talking about earlier are these ones: “col-md-4” and “col-12”. The “md” stands for medium and it means that each div will be 4 columns big until the screen reaches its medium width (which is about 768px). After that the class “col-12” will make every div occupy the entire horizontal space, meaning that you will have only one image per line.

To have the Bootstrap grid system working, you’ll need to wrap your content in a container (fluid, in this case; which means it will be full width) and in a row.

Aside from all that, you had an unclosed <a> tag in your Portfolio h1 (which I removed completely in the code above; you don’t need it, you can assign the id directly to the h1 or, even better, to the container). You are also referencing the body two times in your CSS, one is more than enough!

4

Thank you for the feedback, I am a bit lost :confused: but trying!
When you say images can’t be seen do you mean my background images?

5

Ha, no, those are fine! No worries. You said you tried something with images in your portfolio section and I was expecting to find some there. I was talking about those.

6