![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/5b1c210e6e7e604f0bfca261cdae34f8-87a1c39.jpg)
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!
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/c70294be72623e3f8995ee4832f8d065-87a1c39.jpg)
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,
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/5b1c210e6e7e604f0bfca261cdae34f8-87a1c39.jpg)
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".
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/c70294be72623e3f8995ee4832f8d065-87a1c39.jpg)
Yes Wyn, you are correct to say that you can apply styling between two breackpoints the way you described it 🙂