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?.
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.
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.
If there is no
srcattribute, depends on the value of the
typeattribute, but must match script content restrictions.
If there is a
srcattribute, 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.
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.