How to make website responsive?

Question

I made a website but it is not working on mobile. I am beginner and dont know much about responsive website.

Answer 1

Yeah, it's very important to make your site responsive on mobile :)

You can add these lines to do so,

HTML:
<!-- below is your default style for laptop/PC -->
<link rel="stylesheet" type="text/css" href="style.css">

<!-- and this is your styles when mobile device is used -->
<link rel="stylesheet" type="text/css" href="mobile-style.css" media="screen and (max-device-width: 500px), screen and (max-width: 500px)">

The media attribute checks if max-width / max-device-width is 500 pixels (i.e., mobile), then *include another style file*

NOTE: You can simply override property from style.css by re-declaring them in mobile-style.css

-------------------------------------------------------------------------

For sololearn, you can also use @media query in css like,

@media screen and (max-device-width: 500px), screen and (max-width: 500px) {
/* redeclare styles here
}

check out https://css-tricks.com/snippets/css/media-queries-for-standard-devices/