Topic: regarding responsive breakpoints

amrit free asked 6 years ago

In responsive breakpoints, mostly are based on minimum view-port widths, i.e., "min-width". It is said in the MDB documentation that we should use occasionally "max-width". Please help me explain why. If we use min-width, then we have to use the responsive break-points for every responsive screens. Suppose, we have used "min-width:34em" and included some classes within it, then it will effect all the higher responsive screens. We have to define the classes again for all the responsive screens like "min-width:48em", "min-width:62em", "min-width:75em". But if we use "max-width:34em", we can only use once for that particular responsive screen. No need to use media queries again for bigger screens as it will apply the classes for only 34em max. So my question is why we use "max-width" occasionally. We should use only "max-width" to reduce the use of media queries many times.

We use max-width occasionally because "mobile first" rule is very important to us. The content on mobile devices should look good without any media queries. We use min-height, because by default the website is mobile-friendly and then your browser will read the CSS file to check if there's any custom code for your screen resolution

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No