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

Client-First
1

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.

Cheers
Scott

2

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