How to make website mobile compatible(friendly) ?

Question

How to make website mobile compatible if I have made website on notepad using HTML, CSS and JavaScript.
I have also included meta tag in HTML , do I have to make any changes in CSS file?

Thanks.

Answer 1

Yes, you need to add media queries for differents sizes in CSS. It uses the @media rule to include a block of CSS properties only if a certain condition is true. For example:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 576) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 768) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 992) { ... }

Further reading:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

Using MQ's , JavaScript , and Grid and flexbox you can create for any device.

BTW mods will soon add a duplicatein your question.