Weird Margins on Portfolio Project

Weird Margins on Portfolio Project
0

#1

Hi! I’m currently working on building my portfolio for the beginner front end projects. It’s in the beginner stages and I’m working on going through the CSS now and making everything look nicer. I cannot for the life of me get the margins to go away on the header and footer. I’ve set the body and HTML margins to 0 and nothing. It was fine until I added some Bootstrap elements and I’m wondering if that caused it? Any suggestions on how to fix them would be great. Thank you!


#2

Hey. When you wrap your content in a Bootstrap container-fluid you should also use a row div. That’s 'cause the container-fluid relies on padding (the space you’re seeing in your page) for the row's negative margin (which will then remove the unwanted space).

So, you either put your header and footer outside of your main container-fluid, or you’ll need to wrap them in a row div (you could remove the padding manually as well, if you really want to).

I would also suggest to remove the fixed width(s) from your about-me, portfolio and contact sections; the page can’t shrink at smaller resolution because of those.


#3

Thank you! I removed the header and footer from the container-fluid and that fixed the problem.

As far as the fixed widths, is there a way to make it appear that size but be responsible to other resolutions/screen sizes?


#4

If you just remove the fixed widths, it’ll be exactly as it is now at larger resolutions but you’ll have to fiddle with the bootstrap grid system (and maybe order classes) to adjust the content when the screen shrinks.

For example, using the utilities above, your about me section could be done like so:

<div class="col-12 col-md-8 order-2 order-md-1">
  // stuff
</div>
<div class="col-12 col-md-4 order-1 order-md-2 text-center">
  <img src="your_image"> // the img tag is a void element, doesn't need a closing tag
</div>