SCSS to hide DIV in mobile & tablets and display in desktop browsers

Question

Below is a CSS class used to render a div with some links on one of the pages. I want to hide the div in mobile view(Mobile and tablets) and display only in desktop browsers. I am using SCSS.

What changes should I make to the CSS class?

.ps-widget__content {
        @extend %list-reset;

        ul {
            border: 1px solid #d1d1d1;

            li {
                border-bottom: 1px solid #d1d1d1;
                a {
                    display: block;
                    padding: 15px 20px;
                    line-height: 20px;
                    font-size: 16px;
                    font-weight: 500;
                    color: $color-heading;
                    text-transform: capitalize;
                    i {
                        margin-right: 10px;
                    }
                    &:hover {
                        background-color: $color-1st;
                        color: #fff;
                    }
                }

                &:last-child {
                    border-bottom: none;
                }

                &.active {
                    background-color: $color-1st;
                    a {
                        color: #fff;
                    }
                }
            }
        }
    }

Does this answer your question? [hide div tag on mobile view only?](https://stackoverflow.com/questions/16550485/hide-div-tag-on-mobile-view-only) — JSON Derulo, May 21 '21 at 11:32
first of all in all earnest its css recompilation code if you could post post complied code it would be very nice. I would make some example as answer for possibly what you need to do. — Syed, May 21 '21 at 11:34

score 0 · Answer 1 · answered May 21 '21 at 11:40

You need to use media queries that that compiled by SCSS into following CSS out put or similar.

/* for desktop start */
div {
  background-color: green;
}
/* for desktop end */


/* for tablet start */
@media screen and (max-width: 992px) {
  div {
    background-color: blue;
  }
}
/* for tablet end */



/* for mobil start */
@media screen and (max-width: 600px) {
  div {
    background-color: yellow;
  }
}
/* for mobile end */

<div>css automaticaly adjusts rules as view changes</div>

SCSS to hide DIV in mobile & tablets and display in desktop browsers

1 Answers1