Breadcrumbs on mobile CSS

Hi there, I'm using MODX CMS to dynamically produce the breadcrumbs.

The code produced is below

					

- [Agriculture & Forestry](agriculture-category.html)
 | 
- [Agriculture Topic one](agriculture.html)

	

The Family Office  Wisdom  A - Z
Agriculture & Forestry 	
				
	

And I've obviously changed CSS to get this working on a desktop

.breadcrumb {
position: absolute !important;
width: auto !important;
top: 50% !important;
left: auto !important;
right: 15px !important;
margin: -10px 0 0 0 !important;
background-color: transparent !important;
padding: 0 !important;
font-size: 15px;
font-weight: bold;
}

So big question is, where to I change the css for a mobile and or can I disable breadcrumbs on a mobile ?

.B_crumbBox li{
color:#555;
font-size: 1.0em;
display: inline;

}

.B_crumbBox a{
color:#555;
font-size: 1.0em;
text-decoration:none;
}

.B_crumbBox a:hover{
color:#04462c;
text-decoration:underline;

}

Sorry where to I find the code below, is it in css or html

@media (max-width: 991.98px) {

... your CSS Codes

}

Sorry to be still asking questions

how do you format the code, have I used too many brackets ?

@media (max-width: 991.98px) {

.B_crumbBox ul li {

display: inline;

}
or should it be like this

@media (max-width: 991.98px) .B_crumbBox ul li {
display: inline;
}

as I can't get it to work, and could be a caching issue which does not help

Thanks and that worked - can I change the font size and bottom padding and margin as well with that code, something like below as it's too tight, see attached/

@media (max-width: 991.98px) {

.class {
	display: block;

font-size: 10px;
margin-bottom: 10px;
}

}