CSS for module size (similar to #media)? - css

Question

I have a Joomla Module that I'm trying to keep responsive for different screen sizes but displaying and hiding columns. This works well on full page displays.
#media (max-width: 800px) {
.team_name { display:none; }
.team_abbr { display:inline-block;}
.overall { display: inline-block;}
.divisional { display:inline-block;}
.wide { display:none;}
#btn_row { display:inline-block;}
#div_split { display:none;}
}
#media screen and (min-width: 800px) {
.team_name { display: inline-block; }
.team_abbr { display:none;}
.overall { display: inline-block;}
.divisional { display:inline-block;}
.wide { display:inline-block;}
#btn_row { display:none;}
#div_split ( display:inline-block;)
}
But now my challenge is that I want to have this same page/module used inside another page as a module position (which is only about 200 pixels wide).
Is there a CSS command similar to #media that will get the module width instead of the entire page width that the module is on?
Thanks in advance...

Answer 1

One way to do this is to add a class to your module, then size the elements inside the module relative to their parent (ie the module)
(1) Start by going to the module you want to work on > advanced tab > module class suffix
(2) Add a class and remember to include a space at the start, eg ' my-module-class'
(3) Finally, size your module elements relative to the module, eg
#media (max-width: 800px) {
.team_abbr {
...
width:50%;
}
}
Good luck, I hope this helps!