Good breakpoints for responsive design?

[Linda_A]

I am quite new to attempting a responsive design (and very much a css amateur, as it is), so I am looking for some advice on media queries and break points.

The layout in its current state can be seen at http://www.westeros.org. At the moment, it does okay down to around 1000 width, then various issues start cropping up. The design I based it on (http://www.responsivegridsystem.com/) puts the breakpoint where it starts making columns 100% wide and stacking them at 480px which in hindsight doesn’t work so well for my design. I have too much content in the sidebars to allow them to squeeze down so far before rearranging things.

However, I am very uncertain about what would be a good approach and what sort of minimum widths I should aim for before I collapse things. Obviously, I may need to change some of the sidebar or middle content to fit as well, once I know what to aim for.

The header and menu are an issue I will need to tackle separately as they don’t really play nice at all currently. So this is mainly a query about the sidebars and the main content area.

[Beverleyh]

In short, you shouldn’t target a device size – you should define breakpoints for your own particular site/content; When things start to look rough, set a media query and fix it :)
I think your thought process has already lead you to this logic anyway.

There is a lot of material out there when you search for “best approach to responsive design”, but this site is pretty useful for getting it all in one place https://responsivedesign.is/strategy/page-layout/defining-breakpoints

[Linda_A]

Thank you, Beverleyh. That helped me get the sense of where the basic breakpoints should be for my site (some of the inline content may need its own modifications). I am still a bit bothered by the amount of information that ends up before the main content when the left sidebar comes first, but it was never a site that could be full mobile first given the style of the content.

[Author]

Posts