Hi! I completed this project a while ago but realized I never put it up for review.
It has been a hot minute since I did anything to this project.
I have been getting my front end library and JavaScript certs as of late.
Any advice is welcome. I would also say this is some of my best work so far.
One thing I did notice though is my nav bar is “somewhat” responsive. It resizes
for tablets and still looks good but once you go to phone size it overflows its box.
Any help with that would be great.
I feel like I’ve seen this before.
Overall the design is nice though I’m not a fan of the typewriter looking monospace font for a whole web page.
The width of your content is wide. When viewing on my laptop there’s a slider along the bottom and if I slide it to the right then the content overlays the navbar. There doesn’t seem to be anything to the right to justify needing the additional width.
On smaller screens all the sections of your navbar don’t fit in the allocated space so it overhangs and covers your content. Hovering over the different nav links on the small screen looks horrible. Also, when clicking one of the links the top part of the section is covered by the navbar so one has to scroll to be able to read it.
Your .header_style class in CSS has two different font-sizes. You know what the C in CSS stands for so is that the one you wanted? Get rid of the duplicate.
Too, you have two main section pre blocks. One at line 66 and the other at line 88.
Hi! thanks for the advice. I removed the extra font sizes in the .header-style.
PRE TAGS
The pre tags are for the escaped code so it displays the way I wrote it in the editor.
It stands for preformatted text which is what I wanted.
WIDTH PROBLEM
As for the width there seems to be no problems on my phone or pc. It may because
there is a section in a <li> tag that is tabbed out under the content section.
NAVBAR
As for the navbar, I noticed that when posting the project. Any tips to maybe solve this problem?
I have seen that lots of other people tend to run into the same issue with this project.
I did do some work on it just now so tell me what you think. As for the clipping when using the navbar,
aka hiding the header of that section. I really have no idea how to solve that. If there is a way to say
where the href tag sends you inside of a media qeury since this only happens with a horizontal navbar.
Also do you happen to know a way to trigger a pop-up based on screen size?
I was thinking about putting up a warning that the website was not designed for
screens smaller than 250px wide.
Once again thanks for your advice!
Hi.
Did you add the media query for 1340px? Because with that, on my laptop I no longer ever see the navbar on the left. Is there a reason for adding it?
For your navbar, I can recommend something for you to look at. Wes Bos has free courses at https://wesbos.com/courses/ Look for ‘What the Flexbox’. The video’s are not that long and the course is very informative and I believe you’ll like the results you’ll be able to come up with.
Hello again.
I always had the query for 1340px I believe. If your screen is smaller, I found that the nav bar on the side started clipping with text. Thanks for the course suggestion btw. I will definitely check them out! Thanks again.
Good luck. I’ll wait to see how it finishes up.