Marketplace

Breakpoints

Breakpoints are triggers for when the layout should respond and adapt to the user's viewport (alocated screen space for the page being viewed; screen size; browser window).

There are three core breakpoints in Act2:

Medium (MD)

Viewport smaller than 1140px. CSS media query:

@media (max-width: 1139px) { ... }

Class prefix (where available): md-. Example: md-pt20

Small (SM)

Viewport smaller than 768px. CSS media query:

@media (max-width: 767px) { ... }

Class prefix (where available): sm-. Example: sm-pt20

This is the default breakpoint in HubSpot (Bootstrap 2), when the columns stack one after another on mobile.

Extra Small (XS)

Viewport smaller than 480px. CSS media query:

@media (max-width: 479px) { ... }

Class prefix (where available): xs-. Example: xs-pt20

Note:

HubSpot's grid system is based on Bootstrap 2, which initially, shows the full featured website if no breakpoint is triggered, then scale and adapt the layout on smaller screens. This is opposed to the mobile-first approach, however the results are pretty much the same. That's why for the desktop view there is no breakpoint, so you don't need to use any prefix.