CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kiok Sianto
Kiok Sianto

Reputation: 35

Styling Issue: text-decoration none is not working

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.

Upvotes: 1

Views: 287

Answers (3)

joeCEB
joeCEB

Reputation: 89

.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

Upvotes: 0

GucciBananaKing99
GucciBananaKing99

Reputation: 1506

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>

Upvotes: 2

Kameron
Kameron

Reputation: 10846

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>

Upvotes: 0

Related Questions