Product display that I am trying to manipulate in CSS using ul, ol .row
Megamenu <ol>
contents are changing with my <ul>
cms tags Header View
ul,
ol .col-3 {
margin-top: 0rem;
margin-bottom: 1rem;
font-size: medium;
}
.col-3 {
text-align: left;
width: 100%;
position: relative;
vertical-align: -webkit-baseline-middle;
max-width: 100%;
display: inline-block;
padding-bottom: 4rem;
}
.col-12 {
text-align: left;
width: 100%;
position: relative;
vertical-align: -webkit-baseline-middle;
max-width: 100%;
display: inline-block;
}
.button {
transition: all .3s;
margin: 5px;
text-decoration: none;
display: inline-block;
background: white;
height: 50%;
width: 100%;
line-height: 25px;
text-align: center;
color: black;
margin: auto;
}
.button:hover {
box-shadow: 40px;
border: solid;
}
h3 {
margin-top: 0rem;
margin-bottom: 2rem;
position: relative;
max-width: 100%;
margin-bottom: 2rem;
font-weight: bold;
padding-left: 1.5rem;
}
<div class="row">
<div class="col-3">
<div class="col-12">
<h3 class="size-25"><a href="{{config path=" web/secure/base_url "}}/brands/shepherd-casters/casters/razer-series.html"><span style="color: #007dbd;">Razer</span></a></h3>
<div class="col-content" style="text-align: center; padding-top: 3%; padding-bottom: 3%;">
<a href="https://df239c5e7e.nxcli.net/brands/shepherd-casters/casters/razer-series.html"><img src="https://casterdepot.com/media/Shepherd/RZ03TPP090SWTP05.png" alt="" width="200px;" height="250px;"></a>
</div>
</div>
<div class="col-12">
<div class="col-content" style="text-align: left; padding-top: 3%; padding-bottom: 3%;">
<ul>
<li>Dynamic Capacity</li>
<li>Bearing / Raceways</li>
<li>Finish</li>
</ul>
<a href="https://df239c5e7e.nxcli.net/brands/shepherd-casters/casters/razer-series.html">
<button class="button 3" type="button">Read More</button>
</a>
</div>
</div>
</div>
</div>
I want the ul
, ol
elements to only respond to the body content rather than stuff in the header
. It is enlarging the content in the header because it uses a <ol>
tag. This website is running on Magento 2.4.
2
Answers
I figured it out. Turns out the header was using a basic
ul
,ol
styling so I changed the class name to.bullet-info
. The header was overruling my styles so I had to give the bullets a custom class.Try adding the body class before the defined ul/ol CSS
Example:
In case the
<body>
tag doesn’t has a class then you can usebody
in place ofBODY_CLASS