Media queries

1

I want to use media queries which are in app.less file.

So when the website will be on small screens the .header widget will have 0% margin.

What I am doing wrong? Thanks

@media (min-width: @screen-xs) {
.header-widget{margin-left: 0%;}
}

2

That looks fine. What’s not working? You’ll just need to reset it for larger screens. That media query is saying “For any screen with a width at least as wide as @screen-xs, apply the following styles:”

With Bootstrap 3, you make that the default and then add media queries for larger screens. Also, you can do inline media queries with Less. It’s heavenly.

.header-widget {
    margin-left: 0%;

    @media (min-width: @screen-sm) { //everything larger than the default xs
        margin-left: 25%;
    }

}