I'm stuck with applying responsiveness

guys , I need help with building this site … this is my first time doing this kind of project and the responsive part is a mess , also there are problems with the javascript part … can someone please help?

Don’t worry you will get better at it as you progress if you don’t give up. Meanwhile, be more specific on what you need help with?.

1 Like

My suggestion would be to always build the narrow (or mobile) view first and then use media queries as needed to transition to the wide (or desktop) view.

As to your particular problem, you have display: flex set on the nav in narrow view but are trying to display too many things at a time into one row and thus you are getting a horizontal scroll bar.

1 Like

You can’t combine both using src and have JS in the body of the script element. The only content that is allowed when using src is script documentation.

Content model:
If there is no src attribute, depends on the value of the type attribute, but must match script content restrictions.
If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.

Load the fontawesome script in one script element and have the other JS in another script element. I would suggest you use a file for that JS as well.

@bbsmooth so I commented out my CSS file and rewrote it using mobile first design but I have two problems…
the first is the navbar doesn’t show on desktop view (the js works fine now on mobile view though).
and the second is the footer logo doesn’t show for some reason.
would you please check the code Frontend Mentor | Sunnyside agency landing page

I think you will need to make some changes to the positioning of at least #headnav #navlinks for the desktop view.

I would try messing around with the top padding for that image. Probably not use a percentage.

Also, when I narrow the page all the way in I am getting a horizontal scroll bar and some of the content is bleeding over into other content. I would recommend you really try to stay away from absolute positioning as much as possible.

1 Like

If you remove the height on the logo svg the padding should work. I wouldn’t suggest setting a height on it as it will potentially mess with the typography if you end up squishing or stretching the letters.

Often it is easier to just have two separate navs instead of using a single nav for both views.

thanks a lot for your answers … it was great help… the thing with the navigation was the specificity of the selectors… the selectors in media query was less specific than the one outside it… that’s why it wasn’t applying the rules I gave them.