Hiding / Showing Content with breakpoint

[ScottFromPA]

What's up guys?

I a bit fuzzy on break points and I need help. I have created a "Header Right" widget containing two divs I'd like one to hide and one to show based upon what device hits the site.

I'm using the following..

//medium+ screen sizes
@media (min-width:992px) {
    .desktop-only {
        display:block !important;
    }
}
 
//small screen sizes
@media (max-width: 991px) {
    .mobile-only {
        display:block !important;
    }
 
    .desktop-only {
        display:none !important;
    }
}

One div looks like this<div class="desktop-only"> Seen for all devises except cells</div>

the other

One div looks like this<div class="mobile-only"> Seen only for cell phone</div>

When I post it to my custom style sheet the entire site falls apart.

Any guidance as to why it fails? I'm stumped.

Thanks

[SavvyJackie]

Have you tried using the "only screen" like this:

@media only screen and (min-width:992px)

@media only screen and (max-width:991px)

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[SavvyJackie]

Also - what about adding

@media only screen and (min-width:992px)
.mobile-only {
display:none !important;
}

to make sure the mobile is turned off on desktop?

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[Author]

Posts