So I am trying to create a footer and I have a couple of links featured however the default text-decoration on the links is weirdly not responding to text-decoration none. All the other text-decoration options are working except the text-decoration none. I have even tried making changes to the bootstrap.min.css file as I saw it suggested as a solution however it hasn't worked.
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item{
text-decoration: none;
color: inherit;
}<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item"><a href="">Become a rider</a></li>
<li class="company-item"><a href="">Our Story</a></li>
<li class="company-item"><a href="">Our Team</a></li>
<li class="company-item"><a href="">Contacts</a></li>
<li class="company-item"><a href="">Partners</a></li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item"><a href="">Ride safely</a></li>
<li class="product-item"><a href="">How it works</a></li>
<li class="product-item"><a href="">testimonials</a></li>
</ul>
</div>
<div class="col footer-column contacts">
<p> 254 111 220 055</p>
<p>[email protected]</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link"><a href="">Privacy</a></li>
<li class="legal-link"><a href="">Terms</a></li>
</ul>
</div>
</div>
</div>
</footer>'none' option.
CodePudding user response：
Give it to the a-element
.company-item a {
text-decoration: none;
color: inherit;
}
This would be your code:
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a{
text-decoration: none;
color: inherit;
}<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item"><a href="">Become a rider</a></li>
<li class="company-item"><a href="">Our Story</a></li>
<li class="company-item"><a href="">Our Team</a></li>
<li class="company-item"><a href="">Contacts</a></li>
<li class="company-item"><a href="">Partners</a></li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item"><a href="">Ride safely</a></li>
<li class="product-item"><a href="">How it works</a></li>
<li class="product-item"><a href="">testimonials</a></li>
</ul>
</div>
<div class="col footer-column contacts">
<p> 254 111 220 055</p>
<p>[email protected]</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link"><a href="">Privacy</a></li>
<li class="legal-link"><a href="">Terms</a></li>
</ul>
</div>
</div>
</div>
</footer>CodePudding user response：
You have to use company-item a when styling because links are styled by default so you have to call directly to that element. Also, added !important; for good measures.
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a {
text-decoration: none !important;
color: inherit;
}<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item"><a href="">Become a rider</a></li>
<li class="company-item"><a href="">Our Story</a></li>
<li class="company-item"><a href="">Our Team</a></li>
<li class="company-item"><a href="">Contacts</a></li>
<li class="company-item"><a href="">Partners</a></li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item"><a href="">Ride safely</a></li>
<li class="product-item"><a href="">How it works</a></li>
<li class="product-item"><a href="">testimonials</a></li>
</ul>
</div>
<div class="col footer-column contacts">
<p> 254 111 220 055</p>
<p>[email protected]</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link"><a href="">Privacy</a></li>
<li class="legal-link"><a href="">Terms</a></li>
</ul>
</div>
</div>
</div>
</footer>CodePudding user response：
.custom-footer{
background-color: tomato;
}
.list-items{
list-style: none;
margin: 0;
padding: 0;
}
.company-item a{
text-decoration: none;
color: inherit;
}<footer>
<div class="container-fluid custom-footer">
<div class="row footer-logo">
<div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class=" col footer-column px-4">
<h6>Company</h6>
<ul class="list-items">
<li class="company-item"><a href="">Become a rider</a></li>
<li class="company-item"><a href="">Our Story</a></li>
<li class="company-item"><a href="">Our Team</a></li>
<li class="company-item"><a href="">Contacts</a></li>
<li class="company-item"><a href="">Partners</a></li>
</ul>
</div>
<div class="col footer-column">
<h6>Product</h6>
<ul class="list-items">
<li class="product-item"><a href="">Ride safely</a></li>
<li class="product-item"><a href="">How it works</a></li>
<li class="product-item"><a href="">testimonials</a></li>
</ul>
</div>
<div class="col footer-column contacts">
<p> 254 111 220 055</p>
<p>[email protected]</p>
<p>Nairobi, Kenya</p>
</div>
</div>
<div class="row">
<div class="col px-4">
<ul class="list-items">
<li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
<li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>
</ul>
</div>
<div class="col"></div>
<div class="col">
<img src="/images/google-play-badge.png" alt="" width="150px">
</div>
</div>
<div class="row">
<div class="col px-4">
<p>©2021 TissBoda. All Rights Reserved</p>
</div>
<div class="col"></div>
<div class="col d-flex">
<ul class="list-items">
<li class="legal-link"><a href="">Privacy</a></li>
<li class="legal-link"><a href="">Terms</a></li>
</ul>
</div>
</div>
</div>
</footer>i think the problem was it was selecting the list items and not the links anyway this works