Clean way to define and handle responsive breakpoints?

Hi everyone,

Was wondering if anyone figured out a clean way to define their responsive breakpoints and use that for conditionals?

For example, having a condition like “device is mobile” instead of “Current page width ≤ 768”.

My main idea would be to have an option set for the device sizes and have attributes specifying the range of pixels. Then on page load, checking the page width and setting a state somewhere with the option that matches. My conditionals could then reference that state and handle accordingly.

Wondered if anyone else thought about this and could share their approaches? :slight_smile:

Hey @JakeBennett I usually try to think it as columns, so depending on the page the width of column. Usually I work in columns of 150 px mostly because it’s hard to have repeating groups match their names (the only fix group I have in my pages). The rest 99% are align to parent, rows and columns.

It’s easy to remember and work with. But, I’d like to hear some other as well.

That’s a great strategy!
I also try to follow the 320px rule, where it all breaks naturally at multiples of 320px.

What about for conditional changes to things like padding or font size? I find myself writing the same conditionals (“current page width ≤ 768, padding-left = 20, padding-right = 20”) and stuff like that.

@JakeBennett Yes, after mobile screen I transform all rows into columns.