3 questions regarding portfolio challenge

1

Hi Peeps,

My name is Bjorn,I started a week ago with the freecodecamp challenge. And now i got to the point of the challenge to build a portfolio page. But I stumbled upon 3 problems (challenges). I did a lot of research on Google but i cant seem to get it to work.

First of all is:
If i change my H1 or H2 font family, size, color etc. in my CSS. It doesnt seem to work without !important after. Why could this be?

second:
I want a Div with a H1 and H2 element horizontally and vertically alligned exactly in the middle of the screen where the text shrinks if on a small screen. I can get it to center horizontally by using center-text. but vertically and the scaling of the text is a mission impossible for now.

Third:
I made a navbar with the logo left, the links right. But when I make it a smaller screen. I doesnt seem to want to collapse to a navbar button (with the 3 stripes).

Dont be too hard on me. Its my second page in HTML/CSS/Bootstrap. :blush:

Hope you guys can help me out and clear the sky a bit for me!

The codepen link is: https://codepen.io/Dutchdream/pen/NXKXmQ

Below a wireframe of what i have in mind.

Thanks!

website frontpage
website frontpage1920×1252 221 KB

2

CSS rules are meant to override each other. Which rules ultimately get used is determined by the specificity of the selector you use. Type selectors, which include elements (h1, h2, etc) have the lowest specificity. Since you’ve imported Bootstrap, there are already rules set up for h1 and h2 elements. Your CSS only uses selectors with the lowest specificity, so they don’t override Bootstrap’s. !important gives a rule’s specificity a huge boost, so it puts your h1’s color above Bootstrap’s.

In general, don’t use plain element selectors for exactly this reason. Instead, use classes and, sometimes, ids to give your rules greater specificity.

3

Hi @Dutchdream, For other two questions, you can refer my codepen:


Here, I have fixed your navbar , so that it collapses in case of small screens, added some basic styling for hamburger and positioned your information div in the center using flexbox. Made body and html 100%, then added wrapper and added flex justify-content and align-items to center.
Hope it helps!