Removing bullet points from pricing table not working

[jonathonfowler]

I've created a pricing table but want to remove the bullet points. I've used the following code and would really appreciate your advice on how to resolve this, as the CSS I use doesn't work:

HTML:

<div class="col-triple-container">
    <div class="columns">
    <ul class="price">
    <li class="header">Collection One</li>
    <li class="grey">£1395</li>
    <li><strong>One Photographer</strong></li>
    <li>Coverage begins with pre-ceremony until you sit down for dinner</li>
    <li><strong>Add Extra coverage:</strong></li>
    <li>£200 - Include morning preparations</li>
    <li>£200 - Post-meal coverage until the first few dances in the evening</li>
    <li><strong>Included in the price:</strong></li>
    <li>Fabulous photos in our signature timeless style</li>
    <li>Typically 500+ individually edited watermark-free photos with full licence to print and share</li>
    <li>A 'sneak-peek' preview of a few photos within a week of your wedding</li>
    <li>Private online web gallery for viewing/sharing your photos and ordering prints</li>
    <li>Unlimited downloads of your photos - share with family and friends</li>
    <li>Minimum two-year online backup of your photos</li>
    <li class="grey"><a href="https://loveweddingphotosandfilm.co.uk/contact/" class="button">Check availability</a></li>
    </ul>
    </div>

    <div class="columns">
    <ul class="price">
    <li class="header" style="background-color:#04AA6D">Collection Two</li>
    <li class="grey">£1695</li>
    <li><strong>Two Photographers for the best coverage</strong></li>
    <li>Coverage begins with pre-ceremony until you sit down for dinner</li>
    <li><strong>Add Extra coverage:</strong></li>
    <li>£300 - Include morning preparations</li>
    <li>£300 - Post-meal coverage until the first few dances in the evening</li>
    <li><strong>Included in the price: as Collection One PLUS</strong></li>
    <li>'<a href="https://loveweddingphotosandfilm.co.uk/engagement-photography-offer/">Pre-wedding day photoshoot</a>' - experience a photoshoot before your wedding day</li>
    <li>One extra photopgrapher (2 in total)</li>
    <li>Typically 800+ individually edited watermark-free photos with full licence to print and share</li>
    <li><a href="https://loveweddingphotosandfilm.co.uk/luxury-wedding-albums/">£100 discount off any wedding album</a></li>
    <li class="grey"><a href="https://loveweddingphotosandfilm.co.uk/contact/" class="button">Check availability</a></li>
    </ul>
    </div>

    <div class="columns">
    <ul class="price">
    <li class="header">Collection Three</li>
    <li class="grey">£349 first hour then £300 per hour</li>
    <li><strong>Micro wedding/Elopement - One Photographer</strong></li>
    <li>Minimum booking 2 hours</li>
    <li>Available for off-peak micro weddings and elopements only</li>
    <li>Fabulous photos in our signature timeless style</li>
    <li>Typically 50+ individually edited watermark-free photos per hour of coverage, with licence to print and share</li>
    <li>A 'sneak-peek' preview of a few photos within a week of your wedding</li>
    <li>Private online web gallery for viewing/sharing your photos and ordering prints</li>
    <li>Unlimited downloads of your photos - share with family and friends</li>
    <li>Minimum two-year online backup of your photos</li>
    <li class="grey"><a href="https://loveweddingphotosandfilm.co.uk/contact/" class="button">Check availability</a></li>
    </ul>
    </div>
    </div>

CSS:

` .col-triple-container {
display: flex;
width: 100%;
}

.col-triple {
flex: 1;
border-radius: 25px;
padding: 16px;
margin: 4px;

}

/* If the browser window is smaller than 600px, make the columns stack on top of each other */
@media only screen and (max-width: 600px) {
.col-triple-container {
display: block;
width: 100%;
}

}

.columns {
float: left;
width: 33.3%;
padding: 8px;
}

.price ul li {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
background-color: #111;
color: white;
font-size: 25px;
}

.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}

.price .grey {
background-color: #eee;
font-size: 20px;
}

@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}

Added:

Ul li list-style-type: none as below, expecting this to remove the bullet points, but no joy.

   .price ul li {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
     }

---

Award-winning wedding photographer in Scotland

https://loveweddingphotosandfilm.co.uk

[Author]

Posts