Hide components on screen width?

  • 1
  • Question
  • Updated 11 months ago
  • Answered
Is there an easy way to hide components based on the user’s screen width?

For example, I have a search field in my navigation bar that I would like to hide if the user is accessing the page from a mobile device.

Thanks!
Photo of Gary Bailey

Gary Bailey

  • 1,628 Points 1k badge 2x thumb
  • confident the community can help

Posted 11 months ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Photo of Huyen York

Huyen York, Employee

  • 134 Points 100 badge 2x thumb
I used css to set breakpoints for mobile device if you'd like a css-only solution

@media only screen and (max-width: 768px) {    
/* Add css here that applies only to tablet and mobile sizes : */
    #desktop-nav {        
display:none;
}
#desktop-nav #app-name {
font-size: 15px; /* make title a bit smaller on smaller screens */
    }
}

@media only screen and (min-width: 800px) {
/* For desktop or any screen larger than 800px wide: */
#mobile-nav {
display:none;
}
}
(Edited)
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
This is really slick! I didn't know about this kind of CSS capability. Not to mention nested CSS.