Day 18 - Digging Deeper into CSS - Responsive Design

#selftaught #html #css #beginners

Today has not been a good day. I still went through with my studying but did not complete everything that I wanted to.

Anyways, I went over Responsive Design.

As screen sizes vary and consumption of the web is through mobile phones increasingly, developers have to ensure that users are able to use their site seamlessly. This is where Responsive Design comes in. It allows us to meet the needs of the many screen sizes.

Media Queries

Media Queries are CSS rules designed specifically for a variety of screen sizes. They are conditional rules and only apply if the screen size meet the parameters set by the rule. There are 2 main ways to include them in your side.

1) Link them via a separate stylesheet

One of the benefits of this method is that the link will be ignored if the device width does not meet the parameters of the media query.

If it does meet the parameters, you would have to think about load time.

 <link rel="stylesheet" type="text/css" media="screen and 
(max-device-width: 480px)" href="mobile.css"/>

2) Include then in the main stylesheet

This is my preferred method as all the rules are in one file.

@media only screen and (min-width: 480px) {
   body:after {
      content: "480px to 768px";
      background-color: hsla(180,60%,40%,0.7);
   }
}

In most of the projects I have worked on and made responsive, I was making a clone and knew what changes to make for different screen sizes.

When I was working on the YouTube clone project, I used the Grid to create the main layout. Then I set it up so that when the screen reaches a certain width, the Grid will be displayed another way.

A few things I had to think about when I was making it responsive.

1) Fixed Units

There were section in my grid where I used pixels and when I made it responsive, that section stayed the same width. You may want to stick with % or fractional units with the Grid.

2) Images

Images were the worst to deal with. At first, I gave the image an inline width and as you can imagine, no matter the width the screen, the images were still 180px. The way I fixed it was by putting the image in a div and setting the width to 100%.

That's it for today.

The streak continues ...

Top comments (8)

Habdul Hazeez • Dec 18 '19

Best of luck in your learning endeavors.

Can i make a suggestion on how to embed your code snippets?

Joëlle • Dec 18 '19

Thank you.

Please do, I resorted to a screenshot because when I used the , it comes out weird when I tried it.

Joëlle • Dec 18 '19

I saw your guide on Dev editor and I made the changes to embed the code snippets. Thank you.

Habdul Hazeez • Dec 18 '19 • Edited

You are welcome. I am glad the post helped.

I think you should indicate the language in your second code snippet as CSS and the appropriate syntax highlighting will be applied. Right now it's been rendered as plaintext.

When you do the code would be rendered as thus:

@media only screen and (min-width: 480px) {
   body:after {
      content: "480px to 768px";
      background-color: hsla(180,60%,40%,0.7);
   }
}

And you can check the Developer Tools to confirm that instead of "plaintext", "css" is now used.

EDIT: You can achieve this by adding the word CSS after the first set of backticks.

Joëlle • Dec 18 '19

Thank you so much, I added the language to the second one.

I am also going through your "FrontEnd Development: Zero to Hero". I like to read about the same topic from different people and It helps so much to either learn new things or understand better.