I am working on a mobile first project and have run into an issue with the design of one of the screens. The issue is that the content of one screen in particular doesn't work within one of the breakpoints we have defined. The simple solution is to redesign the screen so it works within the breakpoint but IMO I feel the content should dictate what your breakpoints are, not the other way around, and started Googling.My Googling turned up nothing regarding setting breakpoints for a specific page or screen based on the content.

Has anyone had any experience with page specific breakpoints? Is that even a thing?

  • 1
    Brad Frost has some good advice on this. He also cites a great mantra from Stephen Hay: Start with the small screen first, then expand until it looks like sh#t. Time for a breakpoint!
    – JonW
    Dec 2, 2014 at 23:22

1 Answer 1


Do it

Breakpoints serve at the pleasure of content

Far too many "responsive" sites are designed to fixed breakpoints, and fail to size smoothly for screen widths in between the breakpoints. At best this is brittle responsive design and at worst it's barely responsive at all.

  • Notable offenses include column layouts and images which size OK at fixed breakpoints, but immediately overflow or wrap terribly in between.

This is usually the result of a design myth that breakpoints should be device-led, or just designer laziness leading to failure to check intermediate window sizes.

Breakpoints can and should be content-specific. It's not a bad idea to have device-specific breakpoints as guidelines for common device sizes, but using those breakpoints to style pages is bass ackwards.

If you page, section, or element, requires different breakpoints, it's absolutely fine to use custom breakpoints.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.