Responsive Web Design Made Simple CSS @media Rule Tutorial
- Articles

Responsive Web Design Made Simple CSS @media Rule Tutorial



hello I'm going to demonstrate the easiest way to make a responsive and mobile-friendly website layout okay we're going to begin with a normal layout that has no media query logic so you can see I have a 100 or 1,000 pixel width container centered if I get down to mobile size or smaller screen you can see no changes apply and that would be way too big for a mobile mobile phone screen because then they'd have to scroll this way a lot to see the whole thing and that's not good you don't want to have any horizontal scroll really for smartphone users ok so now watch how easy it is okay now watch how easy it is for me to go in here and just add a CSS media rule it's going to change up the default styling this default styling here can be changed up inside of this rule so our media rule is targeting screen type devices with the feature of max width of 768 so all screens that are 768 pixels and less will get the changes applied let's take a look let's shrink down to 768 and you see what happens and I think I can make the padding 1% to fix that vertical scroll at that size let's see yep see the I mean horizontal scroll you see the way I had the padding set before there was a horizontal scrollbar here at the bottom you want to make sure there's no horizontal scroll when you get down to that size you can see I'm changing the size of the font the text right here changing the h2 to 0.9 am changing the P to 0.7 am that way my content fits in there and it's not the words aren't so giant on the tiny smartphone screen so you can see that is the simplest way because you'll have your default CSS and this can also go in your external stylesheet so you can have your default CSS and then at the bottom of your stylesheet you can put a media query and then change the default styles you can change the body styles and any kind of elements that you want to target you can also make some elements display:none so they just don't display at all for smartphone users maybe you're displaying Google ads or something that are 728 pixels wide or wider maybe 900 pixels wide and that won't do on a smartphone screen you'll have to make that display:none or change to responsive ads sizes or you can put like a 300 pixel wide ad so any elements that you want to make appear only for smartphone users you could put here and make them display:block and then up top just make sure they're display:none so desktop users wouldn't see them at all so what I'm saying is desktop users can see one container and smartphone user can see you know altogether different container by using display:none and display block for instance if I want this to not display I'll put display:none for smartphone users then P elements won't display see it's there for a desktop but when he gets to a small screen the P element just goes away so that's how you can use the display property if you want now I don't want anybody to focus on the particular adjustments that I made because you would have completely different CSS for your existing website or a website that you're building and you would have totally different changes going on for people with smaller screens now if you want to target to where it's only going to happen if the device max width is 768 now if we take a look at that and we try and resize it you'll see that no changes are seen but it would be seen if somebody comes to your document on a smart phone they would see the the little blue mobile version because width and device width are two totally different things so I'll just leave this on max width now to explain that further I'm going to lead you guys to a document that developed PHP that will explain the media rule to you in-depth if if you guys if some of you want to know the nuts and bolts behind the media rule in CSS and this page really goes in depth about the syntax of it it shows you some examples the media types query tokens that you can apply media features that you can put conditions in place for so this page might prove handy to some of you guys that want to really understand the nuts and bolts and I'll put the link to this page in the description of the video along with the page that houses this code example so there's different ways you can set up media queries and I've seen some developers they'll have one media query for their normal desktop users then they'll have another media query for the small screen users but it really you can just put your default CSS for desktop users on top and then under that just put a media query that will change that default CSS to CSS styling that's more compatible for smaller screens that's it and you can have as many media queries that you like inside of your styling now I have some handy tips and tip number one is consider using percentage widths instead of pixel widths you'll have different size smartphone screens so you don't want to have pixel width because different people on different smartphones will see things differently so you want to have percentage widths and make sure that the container is centered using margin zero pixel Auto so you put margin CSS property with zero pixel Auto and then it'll Center that container and if you have a percentage width it will take up a percentage of the screen and it will be equal for all people to view it tip number two is separate your links and buttons far enough apart for a comfortable finger use you want to make sure that people with fat fingers aren't hitting multiple links at the same time when they're clicking you can give your buttons or links some padding that will make the button a little bit bigger itself give the user something more to click on and between the buttons you can give them margin space a little more margin space than you normally would because you know how a mouse pointer is just that very precise tip that clicks but a finger is a lot different that's why you can have links a lot closer together on a big giant screen a desktop screen because the user has a mouse usually and actually a lot of the desktop screens are turning into touchscreens so you just might want to keep this rule this tip as a general rule for all future development projects and tip number three will make sure there is no horizontal scroll at all so all of your content should fit comfortably within the tiny little screen and make sure that the user does not have to pinch and zoom a lot to interact with your content or read it

About Ralph Robinson

Read All Posts By Ralph Robinson

47 thoughts on “Responsive Web Design Made Simple CSS @media Rule Tutorial

  1. One hour spending watching your tutorials Adam, is a total gamechanger man. I learned A TON!!! Very, very important aspects of web design, even stuff I knew after watching your videos I learned so much. God Bless man!!! I wish I could give you hundred likes!!!

  2. Great explaination sir, but I want to ask you one thing :

    I use CSS Media query, for Chrome, I see no horizontal scroll
    But in Opera, I see the horizontal scroll

    Can you explain this ?
    If you can, thank you

  3. Could you please add the media queries in relationship to @import that you stated you were going to go into detail about on the other video?

  4. IS there a was to make the transition from pink to blue and conversion of bigger text into smaller more smooth

  5. Hi Adam, thank you for all your amazing videos on programing. I'm a novice and went to school to learn coding. I defend myself but not as good as you are. I have a question, I'm still old fashion and have a non-responsive website (don't kill me please), but I find it hard to grasp how to make it responsive. If I send you my code, can you look at it? Thanks!!!!

  6. hello sir, first of all I want say you a big thanks. I don't know how many people are there like me who is learning from your video… you are doing a fabulous work. I really appreciate it. and it's my wish to meet you someday. once again thank you so much.
    now I have a question… I want upload a PDF file which can not be download. how can do that? actually I want to make a ebook website. can please suggest me something… please help me.

  7. Why should I have to spend extra time making my buttons/links bigger and more spaced out for people with fat fingers? They chose that life. Deal with it! (Obviously just kidding) lol

  8. Having a responsive website is the de-facto standard nowadays, especially that people are keen to surfing online using smartphones. Hence your site should have responsive web designs that adjust to your customers’ devices. The content, text titles and images should move to fit within the size of a specific screen.

  9. Oh, My, God, your voice is so calming …. I love watching you videos, they are well explained, I find useful information and your voice is just so calming :)) Thank you for your effort that you put into these tutorials!

  10. Hi Adam, thank you for the tutorial. I have a question, how would I code an responsive email blast that has 100% graphics and images with no html text? Thanks!

  11. Hallo Adam i love your tutorials however there is the animated menu bar using css tutorial…i have a problem with it .The buttons cramble and get stuck together when the page is minimized!

  12. I always did the mobile detection with javascript, this is much better! No javascript and css combining! Realy thanks!

  13. In this example you could just put a max-width:98% to the container, except this tutorial is about media queries, not width. I think to reduce navigation interfaces is a better example of use.

  14. Very important. Each HTML document must have the following line of code for media ownership to take effect for each resolution in hand, otherwise it will not work, you declare all styles insidemedia peroprietatii nothing.

    <meta name="viewport" content="width=device-width, initial-scale=1">

  15. WTF are some kind of a psychic? Last night I was hoping for you to create a tutorial about responsive web in a easier way and now you made one. Haha! Thanks for this sir adam..

  16. you can simulate the 'device-max-width' in Chrome by clicking on mobile on "inspecting element" and choosing right resolutions and proper device!

  17. About the responsive i Always rather to create mobile-first interfaces because in My opinion it is better as you don't have to adapt the style For every resolution , you just create one interface that Works Great For every device , btw For a responsive css i recommend to take in consideration the vh and vw to determine the height and width of a container and also the calc() function of css which is a really helpful feature even if it isn't fully supported in old browsers so it is better to have a fallback in percentage or vw/h

Leave a Reply

Your email address will not be published. Required fields are marked *