CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Joshua
Joshua

Reputation: 331

Problems receiving CSS from Media query xs chrome and firefox

I am using the following code to render an extra small screen style, and have tested in all major supported browsers we are working with (IE 11, Chrome, Firefox, edge). The issue I am having is that on call .smallFixFooter the margin-bottom is not being applied to create a space between my stacks of divs.

CSS:

  @@media screen and (max-width:767){
    .smallDevices {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .ScreenStyle {
        height: 914px;
        margin-bottom: 10px;
    }

    .smallFixFooter {
        margin-bottom: 10px;
    }
}

HTML:

 <div class="col-xs-12 text-center smallDevices smallFixFooter largeDevices">
    <div class="col-md-4 col-xs-12 centerDiv footBorder smallFixFooter explorerStyleFoot" style="background-color:whitesmoke;">
        <div style="display:inline-block;width:70%" class="smallFixFooter bottomBoxFix">
            <h3><strong class="footerBoxHeader"></strong></h3>
            <p>
                <span class="explorerStyleSpan"></span>
                <audio controls id="explorerStyle" class="audioFix">
                    <source src="" type="audio/mp3" />
                </audio>
            </p>
        </div>
    </div>

    <div class="col-md-4 col-xs-12 centerDiv  footBorder smallFixFooter explorerStyleFoot" style="background-color:whitesmoke;">
        <div style="display:inline-block;width:70%" class="smallFixFooter">
            <h3><strong class="footerBoxHeader"></strong></h3>
            <p>
                <span></span><br />
                <button class="ComplianceImages" data-toggle="modal" data-target="#modalCarousel"><img src="" /></button>
            </p>
        </div>
    </div>

    <div class="col-md-4 col-xs-12 centerDiv smallFixFooter " style="background-color:whitesmoke;">
        <div style="display:inline-block;" class="bottomBoxFix">
            <h3><strong class="footerBoxHeader">foo</strong></h3>
            <p>
                <span></span>
                <button class="" data-toggle="modal" data-target="#modalCertificate"><img src="" /></button>
            </p>
        </div>
    </div>
</div>

Edit Update: I am retrieving my sizing from this piece of jquery

 var w = window.innerWidth;
var h = window.innerHeight;

console.log(w,h)

it is telling me that the issue is that I am breaking at width 618, and that is not a standard bootstrap breakpoint.

Upvotes: 0

Views: 43

Answers (1)

C3roe
C3roe

Reputation: 96281

@media screen and (max-width:767){

This is an invalid media query.

Any length value in CSS always needs a unit (unless the value happens to be 0) - so make that 767px.

And as @Adrianopolis mentioned in comments, @@media is also incorrect, it needs to be a single @ only - @media screen and ...

Upvotes: 1

Related Questions