Portfolio page - Bootstrap grid not aligning properly

HTML-CSS
1

Hi everyone,

I’m using Bootstrap grid to make my portfolio page but I’m having trouble aligning some of the items:

  1. The cable car graphic in my ‘about’ section when viewed on desktop never aligns properly with the paragraph of text. Is there any way of making it sit side by side properly when you change the size of the browser?

  2. The project tile cards don’t have a horizontal gutter when viewed in smaller viewport. I tried adding gx-* and gy-* classes to the row but it doesn’t seem to make a difference. How do I make sure there is always a space between the top and bottom row of cards?

https://codepen.io/jonnyhoudini/pen/VwKjWVb?editors=1100

Thanks for your help,

Jonny

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

2

Hey @jonnyhoudini!

This code is for the desktop

margin: -35px 0px 35px 0px;
1 Like
3

Thanks so much! That works. I never thought about trying a negative margin for the top.

1 Like
4

BTW,
Your project looks good!

1 Like
5

Add a class to each of your projects div (You have nested each project in its own div)

Use @media and add the following code

.project { 
    margin: 10px 0px 10px 0px;
  }

Use your class name, in the place of project

1 Like
6

Thanks again, that was helpful!

1 Like