Hi there, I’m new to CSS. Done this page please have a look and tell me the solution of responsiveness in small screens.
Hard words can be taken +vely. Thank you 
There is zero responsiveness, so I’m gonna assume you’re asking how to add it. Example:
@media screen and (max-width: 400px) {
.navbar li {
width: 100%;
}
}
Makes each list item in the navbar display at full width. An example of this can be found here (use inspect element assigned to f12 to simulate resizing on chrome, and resize it to 600px. I’m aware it’s ugly.)
edit: I just realized this took 21 minutes to post…
Bro, I don’t know about media queries in CSS. Please guide me by looking my project. How to apply responsiveness to my web-page fully.
If you want to do it by hand, go to Side-view on Codepen, and reduce your project’s display width to about 375px. That’s about the smallest you’ll need.
At the bottom of your CSS, put this as @1-1 mentioned:
@media screen and (max-width: 375px) {
.navbar li {
width: 100%;
}
}
For anything that is messed up on this smaller screen, add CSS here to make it look good. For example, on your project, your h2 with class “desc” is too wide. Add a css tag for it…
@media screen and (max-width: 375px) {
.navbar li {
width: 100%;
}
.desc {
max-width:90%;
margin:auto;
}
}
Keep adding CSS to that media query to overwrite all your other CSS. In the future, you may want to look into and learn something like Bootstrap. As well, it can be easier for me at least to design mobile-first. I.e., when you’re doing your CSS for your future project. Do the CSS for a screen that is 375px wide. Then, add media queries for larger screens.
Also, you’ll need to get good with the Google. You can ask for help here, of course, but this reply is coming 1 hour after you posted. For me at least, I don’t want to wait 1 hour to fix a problem I run into. “How to make responsive website” will pull up plenty of tutorials. For me, I like reading so that works for me. Other people prefer YouTube videos. Visual/linguistic learners. Also, not lecturing, just advice for future because every project has some hiccup or challenge and the best thing about web development is that all the answers are already out there.
I have not done FCC’s responsive design stuff (I did the old curriculum), but I believe there is a section to help with this sort of stuff as well. Maybe jump ahead or review it if you feel shaky on it.
Best of luck
1 Like
Bro, Thanks for your response, I added few CSS but getting confused. Please give some hints and examples. What’s need to add to be responsive of my web page.
If you want a quick solution, try learning Bootstrap in the curriculum.
That will teach you some simple organization, and bootstrap is pretty nice. It does the media queries for you (I believe.)
1 Like
My bad, Due to some reasons I completed my project today(Took 14 days gap). Please check and tell me the navigation responsiveness part in media queries.
try to use bootstrap or any other framework to save time on making it responsive from scratch!
But in this module we restricted to use only pure CSS and HTML. That’s why I’m asking for review and help. Anyway thanks will try frameworks soon.
did fcc explicitly asked not to use any framework? can you share the link if it did?
We can choose bootstrap also but plain CSS is recommended in this module projects.
yeah, I like using raw css and html, but the libraries help a metric ton. Just saying.
Agree Buddy. Brushing up skills 
.
I’d recommend using plain CSS for the first few pages just so you get an idea of how bootstrap and other such frameworks do their thing. It’s invaluable experience for when you need to debug something using a framework and you only have the inspector of the browser dev tools to work with.
1 Like
I absolutely agree. Using Bootstrap is not going to teach you anything (or very little) about CSS. That is unless you dive into the Bootstrap source code and learn from it.
1 Like