Client-frist alignment change for smaller breakpoints using .text-align-center or .align-center

Elements that are centralised on desktop are often left aligned on smallest breakpoints, but the client-first alignment classes don’t work too well to implement this.

What do you do in this situation:

You have an element, and use the secondary class .text-align-center or .align-center to centralise the text or block.

On smaller breakpoints, you want most, but not all elements to be left aligned.

Would love to hear your solutions and thoughts.


Hello @Scott_Humphrey !

That’s a great question!
We recommend adding an is-combo-class in this case.

For example, if you have a specific element that should be left-aligned on mobile, you can have text-align-center + is-mobile-align-left .

Let me know if that works for you. Your feedback is very important, we are always trying to improve our system :wink:

1 Like