@media (max-width) is a feature in CSS (Cascading Style Sheets) that allows you to target devices with screens up to a certain maximum width.

For example:

css
 
 
Copy code
@media (max-width: 600px) {
  body {
    background-color: blue;
  }
}

In this CSS code, we are targeting screens with a maximum width of 600px. If the screen is less than or equal to 600px wide, the background color of the body element will be blue.

You can also use @media (min-width) to target screens with a minimum width.

Here's an example where we set a different font size for larger screens:

css
 
 
Copy code
@media (min-width: 768px) {
  body {
    font-size: 20px;
  }
}

In this code, we are targeting screens with a minimum width of 768px. If the screen is more than or equal to 768px wide, the font size of the body element will be 20px.

You can learn more about media queries at CSS-Tricks.

In CSS, you can use the @media rule to show or hide elements based on the size of the viewport. To hide an <img> in responsive mode, you can use the display: none rule within an @media rule as follows:

css
 
 
Copy code
@media (max-width: 600px) {
  img {
    display: none;
  }
}

The @media rule includes a max-width condition of 600px, which means that any <img> elements will be hidden when the viewport is less than 600px.

You can learn more about the @media rule here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp.

In Bootstrap 5, the use of @media has been simplified. It still supports the same media queries syntax as previous versions, but now @media will apply the same breakpoint values to all of the display options. For example, @media (max-width: 576px) {} will now apply to any display option such as xs, sm, md, lg, xl and xxl. Here's an example from the Bootstrap docs:

css
 
 
Copy code
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) { ... }

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

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

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

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

You can find more information in the Bootstrap 5 documentation.

Media queries in CSS let you change the formatting of your page based on characteristics of the device the visitor is using. You can use media queries to make styles that apply only for specific devices. Here's an example using media queries with the @media rule in CSS:

css
 
 
Copy code
@media screen and (max-width: 1200px) {
  body {
    background: blue;
  }
}

This media query will set the background of the body to blue if the screen size is 1200px or less. Here's a good article to get started on understanding media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp.

The following CSS will align text to the left when the @media query kicks in with a 600px screen:

css
 
 
Copy code
@media screen and (max-width: 600px){
  p {
    text-align: left;
  }
}

To make a div visible only on mobile, you can use the @media attribute in CSS. Here is an example in SCSS:

scss
 
 
Copy code
@media screen and (max-width: 480px) { 
  div { 
    display: block; 
  } 
}

This code will make the div visibility only on screens with width of 480px or less. You can adjust the numbers to suit your project. For further reading about the @media attribute, checkout MDN's documentation.