Breadcrumbs on mobile CSS

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

The code produced is below

<div class="section header-stick">
					
<div class="container clearfix">
<ol class="breadcrumb">
<ul class="B_crumbBox"><li class="B_firstCrumb" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a class="B_crumb" itemprop="url" rel="This is the description of the Agriculture" href="agriculture-category.html"><span itemprop="title">Agriculture & Forestry</span></a></li>
 | <li class="B_lastCrumb" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a class="B_currentCrumb" itemprop="url" rel="The Family Office Knowledge Portal A-Z" href="agriculture.html"><span itemprop="title">Agriculture Topic one</span></a></li>
</ul>
</ol>
</div>	
<div class="container clearfix">

<div class="title-block">
<h1>The Family Office <span> Wisdom </span> A - Z</h1>
<span>Agriculture & Forestry </span>	
				
</div>

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;
}

}