FCC Front End Dev Challenge (Portfolio Site) - pls help!

Code Feedback
1

Hi! I’m having trouble making the background picture fit the whole screen - there seems to be some kind of margin along the width and height of the image, which I want to eliminate. I’ve tried using background-size: cover , background-size: 100% 100%, and background-size: contain, but none seemed to work. Would appreciate your feedback!

2

I also noticed that the layout is a little wonky…my name and the subtitle are still stacking on top of one another even though I’ve already separated them into two rows. Also, the navigation bar is still wonky - I separated the “LOGO” button and the “HOME”…“CONTACT” buttons into two div classes under the umbrella div class=“row”: “LOGO” is under div class=“col-md-4”, and the other four buttons are under div class=“col-md-4 col-md-offset-4”. How can I fix this?

3

The margin you have around your image is added to the body by default from the browser.

You tried to override it but you had a typo in your code here:

body {
  height: 100%;
  margin 0;  /* missing : */
  padding: 0;
}

Once fixed the image should be fine.

As per the row and column, those are classes that comes from an external CSS library called Bootstrap, if you want to use them you need to add this library to your project.

You can do so by going in settings/CSS/add external resource; over there there should be quick add link to Bootstrap.

Hope it helps :slight_smile:

1 Like
4

Thanks for your reply! I first corrected the typo and it did resolve the margin problem. However, when I added the Bootstrap library (I tried both Bootstrap 3 and Bootstrap 4), it created side margins…

5

That’s because container-fluid add 15px of padding on both sides as a gutter:
(docs)

Since you want your image to be the background of the said div just move the class with the image to the container-fluid div instead of keeping it on the section (which will inherit the gutter).

pretty much just this:

//css
.image-background {
    background-image: url(https://blogs.ubc.ca/agutierrez/files/2016/08/IMG_9900.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

//html
<div class"container-fluid background-image">
  <section>[...]</section>
</div>
1 Like
6

Hey! Thanks for replying (and sorry for the late response). I tried doing exactly as you typed above, but now the image has been removed completely…

49 PM
49 PM1403×700 78.6 KB

Would appreciate your further input (and thanks for taking the time to answer my questions/pleas for help)!

7

It may just be the typo I made in writing the classes?

I called the CSS class: .image-background

But then typed in the div: background-image?

If that’s the case the lesson here is never mindlessly copy :stuck_out_tongue:

Otherwise it may be something that you’ve added later on? It’s hard to tell just by looking at a screenshot.

8

I actually did try it with .background-image in the CSS class and background-image in the div but didn’t take a screenshot (to no avail), then reverted it to the typo version just to see if there was any difference :stuck_out_tongue:.

Anyways, I was able to fix the bug, so thanks for your help!