Hello people,
my name is Monica and i need some help with the media queries. i don’t understand at all how this works.
the website i need to create this is Monica Juravlea, web designer.
i was thinking to create something for 800px,640 and 480px.
what i don’t understand is how you resize the window in order to see the changes that come up.
i would be very greatful if you could help me.
many thanks,
Hi,
Here’s an old example I did that resizes to 4 window sizes. Just close the window smaller and as the window width reaches the required trigger point the page layout will change due to the media queries added to the css. You don’t need to do anthing special to make it happen - just close the window smaller.
However, that page isn’t really built in the best way and if designing for mobile you should take the mobile first approach.
Resizing the window manually is one approach, but you can never quite get to the exact size you want to test for.
One handy tool for testing is the “web developer toolbar” for firefox. one of the menu options it gives you is resizing the browser window to a specified size… and you can add your own sizes to the menu.
SOME of the functionality in the toolbar, like “document size” are broken in anything newer than FF 3.5.x, however the ‘resize’ menu still works just fine. Just go into “resize -> edit resize dimensions” and type in the ones you want to test for… they’ll appear on that same “resize” menu item from that point on.
With the capabilities of most of the handhelds increasing at a blazing pace, I’ve been going three target sizes on media queries:
Single column for <768px
Dual column for 768… 1104px
triple column (if there’s enough content) at 1104…1232
Always working in fluid/semi-fluid layouts.
Your current page going through it I’m not seeing there’s enough content there to even bother with two sizes, much less three – though the hard to read script fonts and low color contrasts aren’t helping matters a whole lot either – no matter how ‘pretty’ they are.
The nonsensical use of a H2 and wrapping div around the h1/h2 pairing not helping matters a whole lot either… nor the comment placements that could be (ok, ARE) tripping IE and FF rendering errors.
Hello guys,
thank you very much for your feedback. It is much appreciated.
Best wishes