Making Quattro theme responsive - CGSmartImage [solved]

[wmdvanzyl]

Hi All.

*** SEE BOTTOM POST FOR UPDATE ***

So i started to learn about responsive design and i am trying to make my current theme (the excellent Quattro theme by Goran) responsive.

I am just trying to use media queries for now. So when trying to resize the teaser at the top, the images get squashed and doesn't look nice. Can i make it use a different set of images using media queries?

Also, can i completely hide certain sections using media queries?

If you want to view the site, it is located here using username forum and password is the same as username.

UPDATE: I have found that using display: hidden works well to hide content you dont want to have shown, even if it feels like a hack. Especially considering that some of the content i am hiding have javascript acting on it and is still running in the background - the slider/teaser for example.

[Dr.CSS]

That site has the Site down for maintenance message so no one can see it...

[wmdvanzyl]

That site has the Site down for maintenance message so no one can see it...

Hi Dr. CSS - thanks for taking the time to reply. I am aware and i am in the position where i have to keep it in that state. That is why i created a dummy user called forum and included that information in my post. So a user need only log in with that user to view the site.

UPDATE: I am nearly done and i'm pretty happy with my first attempt. I just have one issue left. CGSmartImage is not resizing the images for the smaller devices. I know it has this capability and i have it set correctly in its settings, but even when the display is only 320px wide, it still generates 540px images - which is exactly the same size as on a regular pc display.

HACKED/SOLVED: Manually set new height/width values in CSS using media queries which solved the issue, but still not sure how to get the module to auto-detect screen sizes and resize/crop automatically.