+ 1

How to make websites responsive?

I have html and css file of a page which works fine in pc but when i open it in mobile phone the page layout and content are not well organized.

html css responsive

19th May 2017, 8:42 AM

Gopal Bhatt

3 Answers

+ 11

media (max-width: 767px) { } • Inside mediaqueries you can rewrite your classes for smartphone only ( 767, 480, 360... ) • When it possible use variable dimensions, like percentage, for example (Header Full-Screen) .header { width: 1248px } ✖ .header { width: 100% } ✔

19th May 2017, 9:04 AM

Maz

+ 3

That's good but there's more to it. the more you use percentages, or ems, instead of hard defined px measurements, the better. you can also set width:100%; max-with: whatever maximum width you want; ...right from the start. Media queries are key, for sure but so is planning and the way you lay out your html elements. This is also important to have in your <head> <meta name="viewport" content="width=device-width, initial-scale=1">

19th May 2017, 10:27 AM

Damien Lucchese