Responsive Media Queries CSS Standard 2022

Hi everyone,
First, thanks for reading my post.

I’m using bootstrap 5 and I would like to use the below media queries for my HTML templates.
So, my question is:

  1. Do I need to add any other media queries?
  2. Or do I need to remove any queries from the list?
  3. Is this media query okay as ThemeForest standard or 2022 commonly used devices standard?
    Please check the below code.
@media screen and (max-width: 1680px) {}
@media screen and (max-width: 1400px) {}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1199px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 575px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 360px) {}

Thanka again.

Hi @PriyoDesign,

You never should to touch/edit the bootstrap css file. If you need to add any media queries then you must have to write those in your template css file (like: responsive.css for html template).


1 Like

No, no. I’ll not change the Bootstrap default media queries. I’m just showing this for accuracy to my template media queries. Okay, I think I should edit my post.

I just need to know about the template responsive media queries list is okay or not for ThemeForest standard.

Thanks for your reply.

There is no “ThemeForest standard for media queries”. Just make sure your item looks good on all screen resolutions down to like 320px.

So, my media queries list is okay for responsive.css media queries as common media queries?

Thanks for your reply.

Use whatever media queries you need to use to make your item look good on all screen resolutions. There are no standards you have to follow in this case, just use common sense. If you can make your site look good on both mobile and desktop without media queries, good. If you need like 10 breakpoints, also good.

1 Like

Thank you. Thank you so much!