1 reply [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 40 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

I have a page on my website that has three columns of images. I want to use responsive web design to resize it, so that when the screen gets smaller, it becomes two columns, and when it gets even smaller, the design should become 1 column.
I want to use media query to achieve this effect, but I need help to get it exactly right.
This is the url: http://duvys.com/newsite/our_work.php
I know it should be something like @media (max-width:1000px)...
But I'm not sure excactly what I am supposed to be doing.
Please help. Thanks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

First work out the 3 sizes or

First work out the 3 sizes or breakpoints you want to use.
Then look at the fixed width elements that will need to change.
Inside the media queries just change the values.

A good idea is to add a background colour to an element inside the media query so you can see that it is being applied.
This should get you started, you will need to play around with the values.

@media screen and (min-width: 675px) {
  /* one column */
  /* the width is less the 675px */
  body{
    background-color:red;
  }
}
@media screen and (min-width: 675px) and (max-width: 1000px){
  /* two columns */
  /* the width is between 675px  and 1000px */
 body{
    background-color:blue;
  }
}
@media screen and (max-width: 1000px) {
  /* 3 columns */
  /* the width is greater then 1000px */
}