css on mobile code example

Example 1: media query

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Example 2: media query

// Example media query syntax
@media only screen and (min-width: 768px) {
  .my-example-class {
    padding: 50px;
  }
}

// Best Practice
// keep default style for smallest screen size (portrait mobile, below 576px)
// and then proceed in assending order with media query like below

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// so on ...

Example 3: detect mobile css

@media only screen and (max-device-width: 480px){
 /* in mobile css commands */ 
}

Example 4: css disable scroll mobile

html,
body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
}