How to figure out proper min-width and max-width values for responsive CSS?
It would seem that you're trying to figure out where and when to apply your breakpoints.
Rather than testing resolution on a bunch of devices why not build a responsive design that is acceptable at every resolution? There are no magic breakpoints that fix responsive websites for every device because every responsive website is going to differ depending on layout, content, etc. and there are tons of different devices with varying resolutions.
You might be thinking, "what the hell, I am not going to go pixel by pixel and check my website," but that's not really what I mean.
Finding your website's breakpoints:
- Jump into a browser, navigate to your website, and open the console
- Resize the viewport to a very low resolution. 320px is a good starting point.
(Note: To get the size of the viewport type window.innerWidth in console. See Resources for more ways to enhance debugging your design) - Analyze your layout. How does it look at this resolution? If you need to change the layout at this resolution then its time to add a breakpoint!
- Slowly stretch the browser window until something breaks or looks horrible. At this point you'll need to insert another breakpoint.
- Repeat step 4 to your heart's content
Keep in mind:
The point of responsive design isn't to make your site look good on all devices, its to make your content look good anywhere - Sam Richards
Resources:
- Responsive Web Design - Programming with Anthony
- Responsive Typography
- Logical Breakpoints For Your Responsive Design
- As mentioned in the above video, Modernizr is an awesome JS library that helps in detecting device-specific features
- Responsive Design View Feature in Firefox 15+
- Responsive Design View Tutorial for Chrome
@Media min-width & max-width
I've found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can't read @media. When I use @media, I use it like this:
<style type="text/css">
/* default styles here for older browsers.
I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width: 960px) {
/* styles for browsers larger than 960px; */
}
@media only screen and (min-width: 1440px) {
/* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
/* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>
But you can do whatever you like with your @media. This is just an example of what I've found best for me when building styles for all browsers.
iPad CSS specifications.
Also! If you're looking for printability you can use @media print{}.
Max-Width vs. Min-Width
It really depends on how your stylesheet works. For example:
@media screen and (min-width:100px) {
body { font-weight:bold; }
}
@media screen and (min-width:200px) {
body { color:#555; }
}
The above two media queries would make the body font bold if the screen is greater than or equal to 100px, but also make the color #555 if it's greater than or equal to 200px;
Another example:
@media screen and (max-width:100px) {
body { font-weight:bold; }
}
@media screen and (max-width:200px) {
body { color:#555; }
}
Unlike the first example, this makes the body font bold and color #555 only if the screen width is between 0 and 100px. If it's between 0px and 200px it will be color #555.
The beauty of media queries is that you can combine these statements:
@media screen and (min-width:100px) and (max-width:200px) {
body { font-weight:bold; color:#555; }
}
In this example you are only targeting devices with a width between 100px and 200px - nothing more, nothing less.
In short, if you want your styles to leak out of media queries you'd use either min-width or max-width, but if you're wanting to affect a very specific criteria you can just combine the two.
Media Queries min-width VS max-width for responsive website
In its current form, your question is primarily opinion based.
It would have probably been better to ask if anyone knows what the reasons behind Bootstrap's approach might have been, although that question is, too, primarily opinion based. But your true chances of getting it answered are much higher here than trying to contact Bootstrap's authors.
And that's why I'll give you my own reasoning, coming from a hands-on approach: I need to get stuff done, it has to be fast and it has to be production ready.
As far as the order of @media queries goes, the only argument for using mobile-first over desktop-first is it sounds better for people who have no clue what it means. So you can always reply to your clients/boss, when they ask:
— Is it "mobile-first"?
— Of course, we use the latest technology...
But, in the real world, as long as your @media queries apply correct code to each responsiveness interval, you're doing-it-right.
The only things you should worry about are, in this order, where possible:
- writing valid code
- writing cross-device/cross-browser code
- writing maintainable and easily readable code (for you and other devs)
- writing less code for same functionality.
With regard to using em vs px, this is the second attempt by Bootstrap to dump px for em in @media queries. To my knowledge, the first attempt was dumped due to lack of support and differences in em calculation on a significant share of mobile browsers, at the time. However, a citation is needed here and I'm unable to find anything about that discussion which I remember reading ~2 years ago. I'm not even sure if it was around v3 or the v4 prototype, which was being released at the time. I think it was v4, though.Anyway, if they decided to use em in v4, em is probably safe to use now.
Edit: Looking closer into v4 beta — released just 9 days ago, it looks like what you quoted is from the scss file, later parsed into px queries into the final dist code. So I am assuming the discussion I remember reading is still valid today. In conclusion, I would advise against using em in your CSS @media queries.
Last, but not least, the screen part should only be considered when you need to take care of how your page looks printed vs how it looks on screen.
If you do need to take care of this, depending on the differences between the two, you have to assess the amount of code you would override if all your existing (screen) code applied to print vs writing all print code from scratch.
If first is faster, don't add screen to your queries and place the @media print overrides last.
If the latter is faster, wrap existing code inside @media screen, add screen to your existing queries, as Bootstrap does, and place your print code inside another @media print, so it doesn't affect screen.
Note: I prefer the first method, as it is a hands-on approach, easily testable and it usually results in less code being written.
How to use min-width and max-width in CSS media queries with high density mobile device screens
There is a difference between device pixels and CSS pixels. On many screens they are treated the same, but on high DPI screens there can be several device pixels per CSS pixel. See this page on MDN for more reading.
To control the width in CSS pixels, use the viewport meta tag in your HTML. This tag is generally only interpreted on mobile devices so it shouldn't affect your site on desktop browsers. It specifies the minimum width at which your site will be displayed.
For example, to set your site to display at a minimum width of 500px on mobile, use:
<meta name="viewport" content="width=500, initial-scale=1">
To display the site at the browser's width use:
<meta name="viewport" content="width=device-width">
In addition to the MDN article, the following article may be helpful for setting display widths for tablets.
Setting a minimum width to fit on responsive website
Use the latter meta viewport value and simply set the min-width CSS property for the body or your container element to be the 480px value you require and set the width to 100%. The min-width will override the width value (as you would expect) when the 100% width falls below 480px.
I'd strongly recommend that you set box-sizing: border-box so you can add padding to your body or container without exceeding the total 100% screen width.
Please also note that disabling user scaling ("user-scalable=no") is poor user experience for many users, and in particular for those with accessibility needs. I'd suggest you set initial-scale=1 instead. See http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
The final result should look something like this-
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS-
#container {
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 480px;
padding: 20px;
width: 100%;
}
How to combine a min-width with a max-width that equals to 100% if needed in CSS?
Its seems like clamp(MIN, VAL, MAX) is your answer in this case.
The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed.
clamp(MIN, VAL, MAX) is resolved as max()(MIN, min()(VAL, MAX))
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
Using max-width and min-width for a scalable design
Generally is the resolution of the device you need to consider, not the width and height of the physical device.
You should set the max-width to whatever is the largest size that looks good for your layout, for example: max-width: 1200px.
For min-width, you should try to make it essentially as small as possible and still look good. But most devices have at least resolution of 320px. So you should be ok with min-width:320px;
Check out this list of devices and their resolutions: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Media Queries not working properly to change the width
the min-width works if range is outside that specified px value and max-width works for that specified range.
I think it is because you are setting width:60% for both device size.
and you are using max-width:45px property on .calculator class so need to change that property in media query and if you want width of your calculator to fit the width of the display size you can remove that property of max-width.
You should try:
works when size of display is in range of 320px and change width according to your need
@media screen and (max-width: 320px){
.calculator {
max-width: 60%;
}
}
works when size of display is greater than of 320px and change width according to your need
@media screen and(max-width: 320px) {
.calculator {
max-width: 60%;
}
}
Responsive CSS (My topmenu position is incorrect in some width screen)?
Here is my fix and suggestion - the only mistake you made is in the ordering of these media queries. I reordered them from max to min width (say 900 to 100) and everything works. open the below snippet in full screen and it will do as you say.
Hope this helps!!
@font-face { font-family: 'headfont'; src: url('fonts/headfontBd.eot'); src: url('fonts/headfontBd.eot?#') format('eot'); src: local('☺'), url('fonts/headfontBd.woff') format('woff'), url('fonts/headfontBd.ttf') format('truetype'), url('fonts/headfontBd.svg') format('svg'); font-weight: normal; font-style: normal;}@font-face { font-family: 'containfont'; src: url('fonts/containfont.eot'); src: local('☺'), url('fonts/containfont.woff') format('woff'), url('fonts/containfont.ttf') format('truetype'), url('fonts/containfont.svg') format('svg'); font-weight: normal; font-style: normal;}* { margin: 0; padding: 0;}html, body { height: 100%; /*max-width: inherit; */ direction: rtl; font-family: "containfont", Tahoma, Arial; background-image: url(bg/bg7-2.jpg); background-position: right; background-size: auto; background-repeat: no-repeat; /*background-position-x: -210px; */ /*background-position-y: -415px; */ background-size: 150%, 150%;}#wrap { min-height: 100%;}#main { padding-bottom: 210px; padding-right: 20px; min-height: 150px; min-width: 550px;}/* must be same height as the footer */#footer { position: relative; margin-top: -100px; /* negative value of footer height */ height: 100px; min-width: 100%; min-height: 100px;}#top { position: relative; margin-bottom: -100px; /* negative value of top height */ height: 100px; clear: both; /*min-width:80em; */}#tblfooterrespons { display: none;}#topmenu ul { list-style-type: none; margin: 0; padding-right: 0; overflow: hidden; background-color: transparent; text-align: center;}#topmenu li { margin-right: 1em; float: right; outline-width: medium; text-decoration: none; -moz-border-radius: 150px; -webkit-border-radius: 150px; -o-border-radius: 150px; border-radius: 150px; background-color: #069; margin-bottom: 10px; min-width: 122px;}#topmenu { padding-top: 5em; max-height: 25px; min-height: 25px; /*width:70em; */ opacity: 1; margin-right: 0em; z-index: 1000; position: absolute;}#topmenu li a { display: block; color: white; text-align: center; padding: 10px 26px; text-decoration: none; -moz-border-radius: 100px; -webkit-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; transition: all 0.5s ease 0s;}li a:hover { background-color: #18E9F3; color: #000 !important;}a:visited { text-decoration: none; border: none;}a:link { text-decoration: none; border: none }#header, #logo1 { top: 0em; left: 0em;}#header { top: 0px; right: 0px; min-width: 100%; min-height: 100px; /*font-size: larger; */ font-family: headfont; font-weight: bold;}#header font { font-size: 36px; color: #00ffff; text-align: center;}#header, #logo1, #footerbg, #info { width: 100%; /*min-width:100%; */ /*or 100%*/ z-index: 14; padding: 0px 0px; margin: 0px 0px; position: absolute;}#footerbg, #info { bottom: 0px; right: 0px; /*min-height:115px; */}#footerbg { min-width: 100%; min-height: 115px;}#info { margin-right: 0px; /* jadid 97/02 */}#down { font-size: 14px;}#userinfo { margin-right: 52em; min-width: 200px; width: 300px; height: 150px; position: absolute; background: #5EFF5E; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; transition: all 1s ease 0s;}#bgcontainer { margin-right: 13.5em; margin-top: -2em; padding-bottom: 1.25em; padding-top: 4.25em; height: 8.25em; width: 25em; background-color: #7DA8FF; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; z-idex: 2; position: absolute;}#bgcontainer2 { margin-right: 13.5em; margin-top: -2em; padding-bottom: 1.25em; padding-top: 2.25em; height: 12em; width: 25em; background-color: #7DA8FF; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; z-idex: 2; position: absolute;}#bgcontainer3 { padding-top: 1.5em; margin-top: 2em; margin-right: 13.5em; text-align: center; width: 25em; background-color: #FFD5D5; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border-radius: 2em; vertical-align: top; color: #FF0D13; position: relative;}#maintext { padding-right: 0%; max-width: 600px; /*width:820px; */ /* width:auto; */ margin-top: 60px; padding-bottom: 50px; background: #8CE8F2; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px;}#p1 { transition: all 1s ease 0s;}#spacer { height: 10px !important;}#spacer2 { height: 40px !important;}input { margin-right: 0%;}label { margin-right: 5%;}p { overflow-x: hidden; padding-top: 3%; min-height: 50px; padding-right: 5%; max-width: 500px; /*jadid 97*/ clear: both; color: #000000; background-color: #8CE8F2; margin-left: 10%; padding-bottom: 4%; -moz-border-radius: 50px 0px; -webkit-border-radius: 50px 0px; -o-border-radius: 50px 0px; border-radius: 50px 0px;}table, tr { border-spacing: 5px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;}td { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}th { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}input[dpieagent_iecontroltype="2"] { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: 25px; border-color: #000;}input[type="text"] { text-indent: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: 25px; border-color: #000;}input[type="password"] { text-indent: 8px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: 25px; border-color: #000;}input[type="submit"] { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: 25px; border-color: #000; font-family: containfont, Tahoma, Arial; transition: all 0.5s ease 0s;}input[type="reset"] { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: 25px; font-family: containfont, Tahoma, Arial; border-color: #000; transition: all 0.5s ease 0s;}input[type="button"] { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: 25px; border-color: #000;}select { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: 25px; border-color: #000; font-family: "containfont", Tahoma, Arial;}#exit { background-color: #FF4040; transition: all 0.5s ease 0s;}#exit:hover { background-color: #FF8040; color: #000 !important;}@media only screen and (max-device-width: 740px) { /*#logo { margin: 0 auto; } */}@media only screen and (max-width: 740px) { #header { font-family: headfont; font-weight: bold; } #header font { /*size: 26px; */ font-size: 26px; color: #00ffff; font-weight: bold; }}@media only screen and (max-device-width: 700px) { /*#logo { margin: 0 auto; } */}@media only screen and (max-width: 700px) { #footerbg { margin-top: 10px; height: 200px; } #footer { margin-top: -250px; height: 250px; min-height: 250px; } #tblfooternormal { display: none; } #tblfooterrespons { margin-right: 35px; display: inherit; }}/* !*responsive css*! //////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////// */@media only screen and (max-device-width: 570px) {}
@media only screen and (max-width: 570px) { #header { font-family: headfont; font-weight: bold; } #header font { /*size: 26px; */ font-size: 19px; color: #ec4b3f; font-weight: bold; }}
@media only screen and (max-device-width: 900px) {}
@media only screen and (max-width: 900px) { #main { padding-bottom: 210px; padding-right: 10px; min-height: 150px; min-width: 90%; } #maintext { padding-right: 0%; max-width: 90%; } p { max-width: 80%; }}
@media only screen and (max-device-width: 800px) {}
@media only screen and (max-width: 800px) { #main { padding-bottom: 210px; padding-right: 10px; min-height: 150px; min-width: 90%; } #maintext { padding-right: 0%; max-width: 90%; } p { max-width: 80%; }}
@media only screen and (max-device-width: 700px) {}
@media only screen and (max-width: 700px) { #main { padding-bottom: 210px; padding-right: 10px; min-height: 150px; min-width: 90%; } #maintext { padding-right: 0%; max-width: 90%; } p { max-width: 80%; }}
@media only screen and (max-device-width: 500px) {}
@media only screen and (max-width: 500px) { #main { padding-bottom: 210px; padding-right: 10px; min-height: 150px; min-width: 90%; } #maintext { padding-right: 0%; max-width: 90%; } p { max-width: 80%; background-color: #FF8080; } #topmenu { padding-top: 5em; max-height: 15px; min-height: 15px; opacity: 1; margin-right: 0em; z-index: 1000; position: absolute; } #topmenu li { margin-bottom: 10px; max-width: 125px; } #topmenu li a { padding: 7px 18px; background-color: #990099; font-size: 10px; }}
@media only screen and (max-device-width: 600px) {}
@media only screen and (max-width: 600px) { #main { padding-bottom: 210px; padding-right: 10px; min-height: 150px; min-width: 90%; } #maintext { padding-right: 0%; max-width: 90%; } p { max-width: 80%; } #topmenu li { margin-bottom: 10px; min-width: 60px; } #topmenu li a { font-size: 80%; }}
@media only screen and (max-device-width: 400px) {}
@media only screen and (max-width: 400px) { #main { padding-bottom: 210px; padding-right: 10px; min-height: 150px; min-width: 90%; } #maintext { padding-right: 0%; max-width: 90%; } p { max-width: 80%; background-color: #ec4b3f; } #topmenu { padding-top: 8em; max-height: 11px; min-height: 11px; opacity: 1; margin-right: 0em; z-index: 1000; position: absolute; } #topmenu li { margin-bottom: 10px; max-width: 90px; } #topmenu li a { padding: 3px 3px; background-color: #72F96A; font-size: 7px; }}
@media only screen and (max-device-width: 300px) {}
@media only screen and (max-width: 300px) { #main { padding-bottom: 210px; padding-right: 10px; min-height: 150px; min-width: 90%; } #maintext { padding-right: 0%; max-width: 90%; } p { max-width: 80%; } #header { font-family: headfont; font-weight: bold; } #header font { font-size: 16px; color: #00ffff; font-weight: bold; } #topmenu { padding-top: 5em; max-height: 9px; min-height: 9px; opacity: 1; margin-right: 0em; z-index: 1000; position: absolute; } #topmenu li { margin-bottom: 10px; max-width: 70px; } #topmenu li a { padding: 2px 5px; background-color: #ec4b3f; font-size: 5px; }}
@media only screen and (max-device-width: 200px) {}
@media only screen and (max-width: 200px) { #main { padding-bottom: 210px; padding-right: 10px; min-height: 150px; min-width: 90%; } #maintext { padding-right: 0%; max-width: 90%; } p { max-width: 80%; }}@media only screen and (max-device-width: 100px) {}
@media only screen and (max-width: 100px) { #main { padding-bottom: 210px; padding-right: 10px; min-height: 150px; min-width: 90%; } #maintext { padding-right: 0%; max-width: 90%; } p { max-width: 80%; }}<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4"> <title>registering system</title> <link href="style-en.css" rel="stylesheet" type="text/css" /> <script src="ref/jquery-1.9.0.js"></script> </head> <body onload=""> <div id="top"> <div class="topmenu" id="topmenu"> <ul> <li><a href="index.php" class='lia'>Main Page</a></li> <li><a href="index.php?click=ln">Sign in</a></li> <li><a href="index.php?click=contact">contact us</a></li> <li><a href="index.php?click=req">request</a></li> <br> <li><a href="index.php?click=regp">register person</a></li> <li><a href="index.php?click=regc">register in classes</a></li> <li><a href="index.php?click=lp">List of persons</a></li> <li><a href="index.php?click=lc"></a>List of classes</li> <li><a id="logout" href="index.php?click=logout">logout</a></li> </ul> </div> <div id="header" style=" background-color:#003;opacity:0.6;text-align: center"> <font> Registering System Of Education Center </font> </div> <div class="logo" id="logo1" align="center"> </div> </div> <div id="wrap"> <div id="spacer"></div> <div style="height:100px;"></div> <div id="main" align="right"> <a name="bl1"></a> <div id="spacer"></div> <div id="maintext"> <p style="width:700px"><strong style="font-size:24px">Information:</strong><br />This is main page...</p> </div> </div> </div> <div id="footer"> <div id="footerbg" style=" background-color:#003;opacity:0.6;"> </div> <div id="info"> <table id="tblfooternormal" style="bottom:0px;right:0;min-width:700px;"> <tr> <td width="25px"></td> <td> <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;"> </font><br /> <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;"> </font><br /> <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;"> </font><br /> <font color="#00CC66" style="height:100px;width:2px;border-right:1px solid;"> </font> </td> <td> <img src="img/telegram.png" width="50px" height="50px" style=" clear:left; float:right;margin-left:20px; " /> <font color="#00CC66" id="down"><b>Our channel:</b></font><br /> <font color="#00CC66" id="down"><b><a href="http://#" target="_blank" style="text-decoration: none;color:#09C;" >####</a> </b></font><br /> </td> <td> <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font><br /> <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font><br /> <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font><br /> <font color="#00CC66" style="height:50px;width:2px;border-right:1px solid;"> </font> </td> <td> <font color="#00CC66" id="down"><b>Address:</b></font><br /><br /> <font color="#00CC66" id="down"><b>Tel:</b></font><br /> </td> <td> <font color="#00CC66" style="height:50px;width:2px;border-right:1pxRelated Topics
::Before/::After + Flexbox in Mdn
Safari Image Size Auto Height CSS
Export HTML Table to Excel and Keep CSS Styles
CSS Different Border Widths Overlapping Themselves
Draw a Line That Doesn't Get Thicker When Image Stretches
Zooming on a Point with CSS3 Transform Scale
Rendering CSS3 Inset Shadow with an Image
Putting Image Always in Center Page
Dropdown Menu - Make the <Ul> Submenu 100% Width
How to Properly Mix Bootstrap and Bem
Input Background Colour Destroys Styling
Why Is the # Selector of Lesser Specificity Than Anything
Override Angular Material CSS Differently in Different Components
Select Element Based on Child Class