Question 278118 in Html Question posted in
Some basic documentation can be found here.

Html – Text-decoration: None is not working with my code

My main problem is that I could not remove the underline, bullet, and highlighted part? with my code

What I planned to do is to remove the the underline with the links and the bullets

.bottomscreen {
  display: flex;
  height: 30vh;
  font-family: sans-serif;
  margin-top: 0%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/IMAGES/bottom.jpg);
  color: #fff;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
}

.bottomscreen a {
  text-decoration: none;
}

.customercare {
  margin-left: 15%;
  text-decoration: none;
}

.contact {
  margin-left: 30%;
  text-decoration: none;
}
<div class="bottomscreen">
  <div class="customercare">
    <h3>About Customer Service</h3>

    <ul>
      <li><a href="webpage4.html">Customer Service</a></li>
      <li><a href="webpage4.html">Customer Feedback</a></li>
    </ul>
  </div>

  <div class="contact">
    <h3>Other Contacts</h3>
    <ul>
      <li><a href="https://www.facebook.com/medrxdrugstoresanfab">Facebook Page</a>

        <li>Phone Number: 09229266659</li>
    </ul>
  </div>
</div>
Tags:

2

Answers


  1. 0

    The underline is ok, to remove the bullets you can add this.

    .customercare ul,
.contact ul {
 list-style: none;
 padding-left: 0;
}
    Login or Signup to reply.
  2. 0 
    You can try this code. 

.bottomscreen { height: auto; }
.bottomscreen .customercare { margin-left: 30px; } 
.bottomscreen .customercare ul, .bottomscreen .contact ul { padding-left: 0px; } 
.bottomscreen .customercare ul li, .bottomscreen .contact ul li { list-style: none; padding-top: 6px; padding-bottom: 6px; }

    .bottomscreen .customercare a, .bottomscreen .contact a { text-decoration: none; color: #fff; }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search