best way to get some sorta responsive design on my site?

[gmox]

I’d like to be able to scale things down to a smaller screen/window, at least to where there are no scroll bars on a smallish lap top. Maybe even a tablet size. I’ve done some research on media queries but I’m having a hard time translating that info into my site. I have so many images just in the header and to get the proper placement of everything including the menu felt like I was smashing square blocks into a round hole.

So, I’m not sure where to start. Can I use the existing markup or should I scratch that and start over? Some suggestion on where to begin would be great! Here’s the page: web-moxie

[furrball1383]

Umm if you’re using media queries then I have no clue, the only other way I may suggest is to use percentages on all the images and divs, but I think that might be more trouble too :( I mean using percentages for the widths and heights on divs causes them to resize along with the window and the same can be done for images. However you will have to figure something else out for text

[stevendeeds]

well, you are wanting to target screen sizes less than a certain resolution… so…

@media screen and (min-width: 400px) and (max-width: 800px) { //STYLE YOUR ELEMENTS THE WAY YOU WANT THEM DISPLAYED IN HERE }

Check this out: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/

[gmox]

I understand how to target various screen sizes. I guess my issue is with how the css is currently and how and what to change within the media query. I have a feeling that the way the page is currently structured and styled won’t work when I change css within the media query (it hasn’t so far). Specifically, with the header, it was hard for me to position the elements where I wanted them. And that is on a static page let alone something that will re-size. So, maybe, the root of my problem starts with the original markup?

I’m tempted to downsize all my graphics and load those in the media query and at a certain screen size, the images will be swapped out. Wouldn’t that make the site heavier and slow it down b/c it now has to load everything 2x’s? It doesn’t seem like that is the proper way to go.

[Paulie_D]

Could you not use the media query in the page head rather than the actual css file? That way it only loads the specific css file depending on the actual viewport size.

[furrball1383]

Pauline does this mean it would still load the multiple images hes making (in other words the big versions and the small versions) or would it only load the version that is being specified in the css that it loads?

[Paulie_D]

It’s Paulie (I’m a fella!) but by putting the media queries in in the page head e.g.

it will only load the css file applicable and thus only the related images (I think).

If you specify a single css file with the media queries at the bottom, I think it will load all images and only display those that apply.

If I’m wrong, I’m sure someone will correct me.

[furrball1383]

Thanks for the info Paulie, sorry for the incorrect name and gender lol. I usually come on css tricks at night around 2 and 3 am and sometimes my brain just doesn’t work properly so I managed to not read the name properly.

[Author]

Posts