Hi
When add a media query for smart phones, 300, it strikethru my other class. Must I create a media query for each screen size? How can there be a global and exceptioned for explicit media query? ty
To answer your question, I would need more details. What exactly are you trying to accomplish with this 300px breakpoint? If, say, you want a specific font size at a specific screen width, then yes, you would need to create a CSS rule with the appropriate media query for each size. But this is rarely necessary if you use Bootstrap the way it was designed to be used.
Bootstrap is a mobile-first, responsive framework, meaning you start building your website at the XS screen size and go up. For bootstraps basic layout (grid system of containers, rows and columns), no media queries should be needed, as the framework already has pre-made breakpoints for different devices…
XS (Mobile) - 0px to 575px
SM (Tablet portrait) - 576px to 767px
MD (Tablet landscape) - 768px to 991px
LG (Laptop or Desktop) - 992px to 1199px
XL (Desktop) 1200px to 1399px
XXL (Desktop) 1400px and up
You can generate your own customized version of Bootstrap’s CSS with breakpoints of your choosing if you find the premade ones don’t suit your needs…
1 Like
Hi
Do I need to have a media query for each screen size? It appears BSS does not allow multiple media query for a min-max type of coverage. I am sure my stumbling is not new: looks good on large needs adjustment on xs. What is a best practice? ty
Can you share some code?
Show what you’re trying to achieve?
What has your CSS got already?
This will help us help you 
. Are you still a beginner to the program and CSS?
You can do min max media queries, but BSS won’t automatically add them. It only adds min media queries automatically.
If you want to create a min max media query, just add your media query as you normally would in the Style editor, left click once on the media query value, wait a half-second and then left click again, and you’ll be able to edit it.
So you could start with this…
@media (min-width: 576px)
And change it to this…
@media (min-width: 576px) and (max-width: 650px)