Mobile is it small-to-large or large-to-small


Hi Wyn,

UIkit has 4 breakpoints which are the following by default:

@breakpoint-small:  480px;
@breakpoint-medium: 768px;
@breakpoint-large:  960px;
@breakpoint-xlarge: 1220px;

This is used throughout UIKit and can be adjusted in your child theme (official Beans starter child theme) style.less.

Hope that helps,


Hi Thierry,

Yes, thank you!

And to expand on my original question, I believe one can do @media with both large-to-small behavior changes and small-to-large, depending on whether one uses max-width or min-width, or even one could specify behavior beween two breakpoints as follows:

( min-width: @breakpoint-small ) and ( max-width: @breakpoint-medium-max )

Of course, I might have that backwards. I will have to create some kind of master file for myself. Something that translates into English as "when less-than-or-equal to, do THIS".


Yes Wyn, you are correct to say that you can apply styling between two breackpoints the way you described it 🙂

Write a reply

Login or register to write a reply, it's free!