Responsive layout - any suggestions?

[Dick Montage]

I've thrown together a little responsive layout, and wondered if any of the better developers here could take a look, please?  It's not about design, just about "Is it working?  How can it be better?".  It's meant to:

 

Be centred on wider resolutions

Navigation take a 2nd line on lower resolutions (<750)

Navigation become iPhone style on devices

Sidebar to the right on wider resolutions

Sidebar below on lower resolutions (<750)

Sidebar below on devices

 

http://niklouch.com/

 

Thanks in advance

[Dick Montage]

Anything?  I'd rather get this correct before moving on

[Dick Montage]

Oh well, worth a try asking here.  Anyone suggest any forums more suited to this sort of stuff?

[ZakO]

On low-resolution devices when the menu wraps to two lines it overlays the first paragraph of text. Also, while the approach you've taken is fine for small projects I would recommend looking at mobile first (with min-width media queries) for larger ones, it generally allows for cleaner styles (i.e. not a bunch of undoing styles like float: none). 

[Dick Montage]

1 minute ago, ZakO said:

On low-resolution devices when the menu wraps to two lines it overlays the first paragraph of text. Also, while the approach you've taken is fine for small projects I would recommend looking at mobile first (with min-width media queries) for larger ones, it generally allows for cleaner styles (i.e. not a bunch of undoing styles like float: none). 

Thank you.  Can I ask in what browser you are seeing the overlap, as I'm not in Chrome, Safari, IE 8, 10 (mobile and desktop)?

 

I've just started reading on mobile first - interesting.  But yes, this is for my personal blog, which will basically have a readership of one most likely

[ZakO]

34 minutes ago, Nik L said:

Thank you.  Can I ask in what browser you are seeing the overlap, as I'm not in Chrome, Safari, IE 8, 10 (mobile and desktop)?

Actually, that's my mistake, I only tested briefly on a resized chrome desktop, I didn't notice the max-device-width media query in your stylesheet adjusting the menu on small devices so it probably only breaks on a desktop browser sized small.

 

34 minutes ago, Nik L said:

I've just started reading on mobile first - interesting.  But yes, this is for my personal blog, which will basically have a readership of one most likely

Yeah, that's understandable . It's definitely worth looking at if/when you're going to do larger responsive sites.

 

[Dick Montage]

28 minutes ago, ZakO said:

I only tested briefly on a resized chrome desktop

But still, a slight issue worth me resolving.  Thanks

[+John. Subscriber¹]

Nothing wrong with what I can see. Looks good!