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.

Photo of Gary Bailey

Gary Bailey

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

Posted 2 years ago

  • 1
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,692 Points 20k badge 2x thumb
Photo of Huyen York

Huyen York, Employee

  • 462 Points 250 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 {        
#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 {
Photo of Pat Vachon

Pat Vachon, Champion

  • 45,682 Points 20k badge 2x thumb
This is really slick! I didn't know about this kind of CSS capability. Not to mention nested CSS.
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 4,640 Points 4k badge 2x thumb
Just came across this and wanted to provide a quick update, since this can now be handled declaratively in Spark v2 using the new Viewport Width rendering condition.