• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Responsive layout - any suggestions?

Question

+Human.Online    8,541

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

Share this post


Link to post
Share on other sites

7 answers to this question

Recommended Posts

  • 0
+Human.Online    8,541

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

Share this post


Link to post
Share on other sites
  • 0
+Human.Online    8,541

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

Share this post


Link to post
Share on other sites
  • 0
ZakO    495

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). 

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
+Human.Online    8,541
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 ;)

Share this post


Link to post
Share on other sites
  • 0
ZakO    495
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 :p. It's definitely worth looking at if/when you're going to do larger responsive sites.

 

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
+Human.Online    8,541
28 minutes ago, ZakO said:

I only tested briefly on a resized chrome desktop

But still, a slight issue worth me resolving.  Thanks

Share this post


Link to post
Share on other sites
  • 0
+John.    1,395

Nothing wrong with what I can see. Looks good!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.