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

Hi everyone,

Just wondering if the mobile @media stuff defaults to the widest desktop, and one then specifies behavior as the width shrinks -- or does it default to the smallest smartphone, and then one specifies behavior as the width expands?

Probably I should be able to figure that out from the code -- but I get easily confused on polarity issues.

Thanks!

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 🙂