3

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?

tohster
  • 41,070
  • 14
  • 107
  • 139
IczerX01
  • 293
  • 2
  • 8

1 Answers1

2

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.

Community
  • 1
tohster
  • 41,070
  • 14
  • 107
  • 139