Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How can I make this "responsive"? Reply To: How can I make this "responsive"?

#203588
prt
Participant

Hi Matias,

A couple of points not yet mentioned. To make a truly responsive design you should use % whenever possible. For example on your img tag:

img {width:90%;}

Also, you should include this line in the head of each page:

<meta name=viewport content=”width=device-width, initial-scale=1″>

Finally, you’ll need to use media queries to fix the break points. That is, using margins can be ok to position elements, but you’ll probably have to specifically code more media queries to fix when they break. Regardless, you’ll still find screen resolutions where your design doesn’t look right, and media queries fix that. Here’s an example:

@media screen and (max-width:960px){
img {width:20%;}
}

I hope this helps!