Hello everyone, I’ve just finished my first project in the FCC course. I feel like my CSS is all over the place and I’m having trouble getting it to display correctly for a mobile device, any advice? How can I make this look better? Any links for HTML/CSS design for newbies would be greatly appreciated as well. Thank you so much for everything, it’s really amazing that it’s been one week and I’ve gone from knowing nothing to making this. FCC is the best!
Hey man,
You do need to make it responsive. Pages like that are really easy to make responsive! 
If you are lost, I don’t wanna open my mouth too much because I am not great at responsive web design but you can redo the responsive principles section in the curriculum, it is short and should help you.
-Tech.
1 Like
Ok cool. So I went back to those lessons and took another go at it. I updated the header tag to include
meta name=viewport content="width=device-width, initial-scale=1
and I also added in my CSS page
@main screen and (max-width: 600px){
}
but I don’t think I’m setting the values correctly because it still isn’t working correctly on mobile?
Also, is there a better version to be able to see the different view sizes quickly besides having to use my phone and reload the browser?
Use @media screen only and (max-width: ) to set a query. You can use min-width or max-width depending on how the page is to be displayed (mobile-first or not). The size, 600px in your case, set when the screen will change.
For the second part of your question - I use VS code with Live Server to code in then transfer over to Codepen.
Hope this helps!
2 Likes
Hey!
Also, you can use the dev tools available in Chrome and Firefox. A VERY QUICK google search will show you how to do it (simpler then me explaining it). Also you said header but you mean “head” element, it isn’t the same thing, be careful (just to clarify :D).
Also, the meta tag that you put is necessary but you need to make it responsive now. Try to do it using what you learned in that specific section. I see you’ve already done it for the image. Do it for the text (if I remember correctly, they show you how), so try it and if you can’t do it you can search it up or ask me :D!
-Tech.
1 Like
Thank you so much @Tech and @toats.mcgoats for the help.
I was able to figure it out and now I can view it horizontally and vertically on my phone just fine. Now I can go to sleep tonight :D!
2 Likes
Curious to know why you added the in your CSS code?
@media screen and (max-width: 400[x] )
I’m having some issues with my responsiveness on my page too so I wanna know if that helped you? I ended up redoing my project and starting mobile viewport first and then trying to size up.
The [x] should be [px] as in pixels. that might be the problem you were having.
Ahhh, ok. I don’t put my px in brackets, just inside of the parentheses. I’ll see if the brackets around them help, thanks
No. It wont help… I thought that was what you had. I was only saying that you should have px instead of x. If you aren’t getting responsiveness out of your page try changing the max-width to min-width and see what happens. If all else fails post a link to your code so others can take a look at it.