Problem with "Build a Landing Page" project

Code Feedback
21

Ok thanks…I will.

I sent a moderation message to say that your answer and help are of great quality.

1 Like
22

@Theoask

Thank you, I feel honoured.

I’m only just a beginner in front-end myself.
To me helping others and sharing my knowledge is also a way to learn and practise. It’s been a pleasure helping you!

23

This was a help to me in learning Flexbox. https://flexboxfroggy.com/

24

Hello,

I still can’t manage to pass all the tests. It says I miss media queries in my CSS, but I have several.
What’s wrong please?
Also I can"'t align properly the nav bar items, though I checked the flexbox properties and all seems fine.

Do you like my project so far?

Also regarding ther size of the Font Aesome icons, though I set their height to a specified value in pixels, their size doesn’t change and I don’t know why.

25

Hi! I can’t help with everything but your to change the size of your font awesome icons just add

.fa {
font-size: 40px;
}

to your CSS with whatever font size you want them to be!

26

Also: I had a similar issue with media queries until I brought them outside of CSS rules for other things and made it it’s own top level item. So from this

.class {
    width: 75%;
    @media screen (maximum-width: 800px) {
        width: 90%;
    }
}

to this

.class {
    width: 75%;
}
@media screen (maximum-width: 800px) {
    .class {
        width: 90%
    }
}

I don’t know if it’s a codepen issue but visual studio didn’t like the first way either. But that will probably fix your issue!

27

Ok. I m getting ALL MIXED Up right now with all those FLEXBOX properties and CSS.

I decided to build everything from scratch but I’m stuck at this now;:

https://codepen.io/theoask/pen/ErrxYo

DO you have a methodology to propose to me to build my CSS for this type of webpage?

For example: 1 / Do all the HTML 2/ Do the header with flexbox property 3/ Only take care of #img and #logo CSS at the end or something like this.

I’m getting mixed up with flexbox properties and alignment…