Show different style of div for mobile and desktop using css

Show different style of div for mobile and desktop using css

Certainly! Here's an example of how you can apply different styles to a <div> for mobile and desktop devices using CSS:

/* Styles for mobile devices */
@media (max-width: 767px) {
  .my-div {
    background-color: lightblue;
    color: white;
  }
}

/* Styles for desktop devices */
@media (min-width: 768px) {
  .my-div {
    background-color: lightgreen;
    color: black;
  }
}

In the example above, we use media queries to target different screen widths. The first media query targets devices with a maximum width of 767px, representing mobile devices. Within this media query, the .my-div class is styled with a light blue background color, white text color, a font size of 16 pixels, and a padding of 20 pixels.

The second media query targets devices with a minimum width of 768px, representing desktop devices. Within this media query, the .my-div class is styled with a light green background color, black text color, a font size of 20 pixels, and a padding of 30 pixels.

By applying different styles within each media query, you can create distinct visual presentations for mobile and desktop versions of the <div>. Feel free to adjust the styles and properties according to your specific design needs.