Hi, there! I have just made my first ever webpage (https://codepen.io/Leikvard/pen/ZpkNAN). Any comments are very welcome!
I have questions regarding media query, which I would greatly appreciate if anyone could help me with: is there a way for css to distinguish smartphone, tab and laptop? I want to tell the css that, if the device is something like a mobile phone, then I fit the web contents to the mobile phone screen, but if the device is something like a laptop, then web contents fit to browser window size until the window width is smaller then a certain size?
To be specific, I added a media query to css so that when the screen size is smaller than 600px, all web contents will NOT continue to shrink accordingly, you have to scroll horizontally a bit in order to see the full content. The reason is that I assume on a laptop when the browser window is very small, it is not meaningful to continue shrink because no one can read it. But by adding this media query, I found that web contents will not fit my smartphone screen anymore either.
Hope I have made myself clear 
Thank you so much!
You are going to drive yourself crazy trying to customize your CSS for all the different devices out there.
My advice would be to design your page for mobile (narrow) first and then add extra styling for wider widths. To do this, narrow your browser as far as it will go and style your page so it looks good. Once you are happy with this then you have your default CSS to work off of. Now slowly widen the page and let the content tell you where the first break point should be. That’s where you’ll want to add a media break point and style for larger widths.
Right now when I narrow my browser all the way I am getting a horizontal scroll bar. For a page with this type of content that should not happen. So you’ll know when you have the responsiveness working properly when you never see a horizontal scroll.
If you want to get extra fancy, base your breakpoint on ‘em’ instead of ‘px’. That way your page will be more responsive to text size increases as well. If you don’t know how to increase the text size, using Firefox, go to the View -> Zoom menu and activate ‘Zoom Text Only’. Hold down Ctrl and scroll your middle mouse button to make the text size increase. But in order for you to be able to do that, you’ll need to first remove the percentages on all the font sizes for this page. Don’t do that. Use ‘em’ for font size. The user should be able to have complete control over the text size. You’ll understand this someday when you can’t see your own hand in front of your face 
1 Like
Thank you so much! I get your message. Very helpful advice for a newbie! As for the horizontal scroll bar, I’ve recollected some experience with the horizontal scroll, indeed painful!
I’ve got to make lots of changes