A specific media query not working

Question

I have styled the @screen-xs-max and @screen-sm-max. Both of those queries worked. Now I am trying to style @screen-md-max and the styles wont apply to a certain div. Not all styles - just to a particular div. They dont even show up at all when you inspect the element?

HTML:

<div class="screenshot-projects bottom-border wrap" style="background-color:#fff;">
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                <div class="projects-img">
                    <img src="~/Images/img-lgipad.png" />
                </div>
            </div>
</div>

Less:

@media (max-width:@screen-md-max) {

    .screenshot-projects {

        projects-img {
            max-width: 300px!important;
        }
    }
}

The only style not applying is the one to the image size - it's instead taking up the entire screen, and this only happens once i resize to medium. At xs and s it's max:100%; and it applies.

Answer 1

You forgot the dot

@media (max-width:@screen-md-max) {

    .screenshot-projects {

        .projects-img {
            max-width: 300px!important;
        }
    }
}