Making site mobile friendly – dynamic resizing

[MikeJones]

Hi all

I’m in the process of trying to make our site more mobile friendly (www.stickerscape.co.uk). It was created using a Joomla theme however there are a couple of elements on the homepage that don’t quite appear as I’d like for mobile so wondered if you guys (and girls) can give me a few pointers:

• Main menu navigation – the width is set at 100% however the menu slips on to two rows when viewed on mobile
• Module in the top right does not dynamically resize on mobile. I created this myself (and am no expert) but wondered if there was something I can easily add to the CSS to improve how this appears on mobile?

Any thoughts would be great. I’ve got some experience in tweaking CSS but by no means an expert so solutions in layman terms would be great!

Cheers

Mike

[Paulie_D]

I suggest that you do some research on “Responsive Design” and review your existing code. In general, work in percentages for widths etc., use media queries where required to ensure the site works at various viewport widths.

[MikeJones]

Thanks very much for your quick response.

I’ll do some digging – I had hoped by setting the menu width to 100% it would solve it but I think the wrapper that the menu is contained in is a fixed width…

[Paulie_D]

The wrapper you could set a percentage with if you want (if not it defaults to 100%) AND set a max-width the same as your current width and get the best of both worlds.

Then, if you have any other full width elements inside the wrapper you can just delete the widths altogether and they should default to 100%.

You may have issues with your slider because the images are 1024px wide so you’d need to find a way to scale those.

Also, you’d need to look into doing something about the menu breaking once the width gets below 1024px wide.

[MikeJones]

Thanks Paulie – I’ll investigate.

Do you know if there’s handy tool on the web where you can test your site at various resolutions to check to see out which point the formatting breaks?

[Paulie_D]

There’s a little app file called sizer (http://www.brianapps.net/sizer/) or there are the Developer tools in Chrome (probably FF too but I generally use Chrome).

[Author]

Posts