Header behaviour when shrink window

HTML-CSS
1

Hey there, i’ve just started my Product Landing Page Challenge; i’m having some trouble with the header when shrinking my explorer viewport (and trying the site on my phone), while the example one will get some order when the viewpor goes into an smaller scale with a nice alignment, mine will just get destroyed.

On the bottom image there’s my version vs fcc one.
trombones

Here’s my current code.
https://codepen.io/juanpais/pen/jOWdWgj

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Use media queries for responsive layout. I can drop the code you need but that would not teach you much. Try to incorporate media queries in your css code and if you still face any issue, let me know. Happy to help :slight_smile:

1 Like
3

I don’t need the code indeed (yet :sweat_smile:); i’ll investigate a bit. :muscle:

Thanks!