Thu. Dec 5th, 2019

Host your Website

Read and learn

FatCow Web Hosting $1.00/mo* Trust your web hosting to the #1 web host provider, GoDaddy!

CSS3 Tutorial – Responsive Website Layout Media Queries CSS Stylesheets

1 min read

Lesson Code:
Learn to create responsive website layouts using CSS3 media queries. Media queries allow us to target a particular media type and then apply zero or more expressions that check for the conditions of particular media features. Using this logic we can adjust all CSS for our site according to the screen size of the device that a user is viewing it with. It will also be responsive if the user resizes their browser window well after your page loads. An alternative to a responsive layout is to simply use percentages for the width values of your elements. But some developers must completely restructure the layout according to the screen size of the viewer. That is where a responsive layout is applied. It also makes you look very capable in your web site design skills.

Related Tutorial:
Window Size Responsive CSS Layout Stylesheet Change JavaScript Tutorial

41 thoughts on “CSS3 Tutorial – Responsive Website Layout Media Queries CSS Stylesheets

  1. Appreciate this video. Am taking coding class & it's often hard to take notes while instructor is talking. Your video was very easy to follow along. (Have watched too many videos where the person talks so fast, it's hard to follow along & you end up feeling frustrated.) Thanks so much!

  2. OK. FOlow up from my initial…. GREAT! Concise, to the point with easily readable text examples on my screen. So often idiots don't factor how the text will appear when they view the code they are trying to show or even WORSE those schmucks who do tuorials and don't talk at all. QUEATION: I've seen the attribute of 'only placed before 'screen and' in the media query inside the <link> tag. What does this additional word do ot the code? Thanks

  3. You should take yourself and your audience more serious. Your intro SUCKED BIG TIME> the rasbery at the end of your increased speaking speed set a bad tone for what I fear the resto of the video will be like. I'm making this comment right after the intro as I was so alarmed by it, I thought you should be advisesd the effect
    And this is coming from someone who has taught many classes in GOV and Private Corp settings. Hoping the reset is informative and more to the point without all the hicups

  4. Thanks for the video, I have a problem though.. I have my medium.css set to (min-width: 960) but it changes to medium.css at 1180something pixels? Why is that?

  5. Hello, thank you for the tutorial. I'm a bit new to this, but rather than having 3 style sheets for 3 different screen sizes, wouldn't it be easier to simply use a percentage (rather than hard coding a pixel value), so one sheet can simply adapt to each window size? Thank you

  6. You should probably add that for a mobile website, it is recommended to first make the mobile site, and then add the media query for larger screens.

  7. This explained things so easily. For a new coder, I really appreciate it. I do however, have a question. I have a html site that was not initially created to be responsive. I understand the concept of creating 3 css files to accomodate sizes, however because I have an existing site, what would I use in place of #mydiv?

  8. Hi, I saw a site where there are three sections..left, center and right for a large screen, when the screen is re-sized to small the left and right sections come below the middle section. how is this done?

  9. You shouldn't use media queries with pixel values, because it messes up zooming. Lots of people zoom in or out! Instead of pixels, use em.

    There is also no need to prefix # tags with the name of the element, since IDs are unique. The more selectors for each element you have, the longer it takes the browser to apply the styles, so keep it concise!

  10. Man I am giving a thmb up for the humor. but i love the vid too. you understand that we dont need being fed too much infor and gave us an amazing piece of work. thank you

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.