I have this page http://baogiadientu.com/demo/mlappfix/privacy.html, I don’t know how to convert it to responsive. Can someone help me do this? Or give me some advises. Thanks.
What have you tried so far? We all need to do some research to find out about responsive design and how it works. It’s better to do your own research first, try some things out, and then ask a question if you are getting stuck. Check this out, for example: https://developers.google.com/web/fundamentals/layouts/
Hi as Ralph said you should try first and then ask questions later but here are a few pointers.
I tend to make the page fluid to start with but you can keep the page at a max-width (in your case 960px) instead of a fixed width so that there will be no difference for desktop users. The page will appear t be 960px width but then can compress. With a few simple changes you can allow the page to compress and make it responsive with little effort before then adding media queries to tidy it up a bit.
For example these changes would make your page mostly fluid.
.container{
width:auto;
max-width:960px;
}
.privacy-content div {
width:auto;
max-width:812px;
}
.privacy-content{padding:38px 10px 18px}
.logo img {padding-left:10px}
.text-intro {
width:auto;
max-width:560px;
margin-left:10px;
}
.text-intro .page-title {height:auto;line-height:normal;margin:60px 0 0}
.background-intro .img2 {margin-right:0}
.footer-link{padding-left:10px}
You would then need the viewport meta tag otherwise mobiles still will not render the smaller page but still shrink it as though it were 980px.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The next step would be then to resize the browser window smaller until things start to look odd or misplaced and then add media queries at that breakpoint to make things look better. Just use this approach until you get down to 320px (or smaller for older mobiles).
More info here.
Thanks everyone! Yours advise are very helpfull. I knew how to responsive and my site can responsive now 