How to Use Media Queries in CSS

Media query syntax for Reactjs

If you have a special cases, when you need to get media query result inside you react app (for example, you want to show some component at mobile version), you can use helpers like react-responsive or react-media-hook.

Best Way To Place Media Queries

The shortest answer is: it depends what you're trying to achieve.

The first option is the worst in terms of file size and readability because of doubling every @media rule makes all the rules longer and hard to effectively debug.

The second option (one CSS file with all media-specific rules grouped under one @media block per media type) is the best when there are rules which overlaps each other in terms of adding something to values coming from the other @media block. In this case this would be more SEO-friendly and economical (by means of number of requests) than downloading several separate CSS files to any matched @media.

The third option is the most effective when @media classifiers don't overlap with each other at all (because it results in a smaller file to download per page load, and only one CSS file is loaded at a time. This would be the best way to go if you have some CSS files for different layouts per device, while only one is needed per device resolution - i.e. one for horizontal resolutions below 320, one for 320-720, one for 720 upwards and one specifically for printing.

How do I use media query to make form responsive for all devices

Your Question is how to use media query, right?

it's really simple. lets says I have button with width 200px.
and I want width button become smaller in smaller device.

/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    button{
        width: 100px;
    }
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    button{
        width: 150px;
    }
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
    button{
        width: 180px;
    }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
    button{
        width: 190px;
    }
 }

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

}

just add the media query on your css and add element or classes name that you want to customize into each media queries.

How can I make an image go below the text using CSS Media Queries?

Your CSS is a a bit confusing. Stuff like top: -320px; should not exist in a ' good written ' css. If you need to do stuff like that you might need to rethink the HTML structure.

Anyway. The easiest way to change the positions of elements is with flexbox.
You can wrap your text and img in a div and for desktop use display:flex; flex-direction:row and in your media query you can use flex-direction:column . So the image will be after( below ) the text.

Check sample below or jsfiddle and adjust it to your specific needs

div {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

img, p {
  flex: 0 0 50%;
  }

@media only screen and (max-width:320px) {
      div {
            flex-direction: column;
      }
      img,p {
          flex: 0 0 100%
          }
}

<div class="homeimgandtextcont">
  <p class="hometext">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta culpa vero iure autem provident nobis doloremque, ducimus dolore, dicta praesentium tenetur, sunt eius officia et sit magni iste. Esse, quisquam.
  </p>
  <img class="homeimg" src="https://via.placeholder.com/150" alt="Image" />
</div>

CSS Media Query For Mobile Not Applying

It is normal to apply the 1303px media because to tell that it is max-width, it is mean that all the smaller screens will apply the style in addition to that it has come to the last style. So it will override all previous styles.

"szulbix" solution is very good for your case.

---

Related Topics