A couple of questions about my website

Hi all,

I’m kinda done with the website, however I have a couple of questions about it.

Thee site is up on github pages at : https://a-adel-dev.github.io/cookies-website

and the repository is on: https://github.com/a-adel-dev/cookies-website

now onto the questions.

1- It was required that the header would be fixed. I had to move everything down to account for the fixed position, now when I click any of the links in the header it naturally leads to the wrong position (the correct position is hidden beneath the fixed header). I’m sure there is a better way to do this. can anyone help me with that?

2- this was a challenge to make the site responsive as well. I have made a different CSS file to load when the screen size is less than 480. it loads correctly on mobile with the mobile css file, but the site is not responsive, in that when i browse it on a PC and manually decrease the browser width, it doesn’t change layout. The only change is an inline media query in the main CSS file. what’s up with that? and do all my media queries had to be inline in order for the site to be responsive?

3- the final thing is kinda broad, and I’m not sure if it is even appropriate to ask, so you can ignore this if you want, I’m sure that I have made bad practices when writing the code for the site, would anyone be so kind and take a look and tell me what areas could be improved upon?

Your browser information:

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

Challenge: Build a Product Landing Page

Hi! I’m not sure if it applies here, but I’ve read somewhere that is better to have just one CSS file, that include everything. That might solve your problem, but again I might be wrong as I can’t remeber for what exact reason that was.

Run your code through a validator. There are things you can clean up in HTML and CSS.
Copy/paste your HTML code into the ‘Validate by Direct Input’ tab.
When done, clear that code out and copy/paste your CSS. Click on the little CSS box.

that’s a good idea…I will definitely do that…thanks!

thank you for your reply. that was what my question is a bout, I have solved the issue in a second CSS file which, while loading fine on mobile, it won’t work when I squish my browser window.

Use max-width instead of max-device-width for the media attribute (media="(max-width:480px)"), device-width is deprecated.