Remove borderline in desktop, tablet, and mobile mode ( Dawn Theme )

Store Design
, , , , , , ,
1

Hello Everyone!

When I click on the dot, a borderline appears around it. I don’t want to keep this borderline in desktop, tablet, and mobile mode. Please help me. Thank you.

Store: https://bdcoffeeshop.myshopify.com/products/mushroom-coffee-with-6-adaptogenic-mushrooms

Password: Admin

Screenshot (80).png
Screenshot (80).png1742×751 157 KB

2

Hi @dreamtechzone_5 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.shea-box{
border: none !important;
    box-shadow: none !important;
}

.flickity-viewport:focus-visible {
    outline: none !important;
    outline-offset: none !important;
    box-shadow: none !important;
}
3

I pasted the code into the base css file but it is not working. I have added the section using the following code. I just want to remove the border line from all the formats.

{% schema %}
{
“name”: “Shea Butter Section”,
“settings”: ,
“presets”: [
{
“name”: “Shea Butter Section”
}
]
}
{% endschema %}

.shea-section { background-color: #d7ede3; padding: 40px 20px; text-align: center; } .shea-title { font-size: 32px; font-weight: bold; color: #1d7c3e; margin-bottom: 10px; } .shea-subtitle { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 30px; } /* Flickity Slider Styles */ .shea-slider { max-width: 1200px; margin: auto; } .shea-box { background: white; border-radius: 10px; padding: 15px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); text-align: center; margin: 10px; min-height: 320px; /* Ensure uniform height */ } .shea-box img { width: 100%; max-width: 180px; height: auto; margin-bottom: 10px; border-radius: 10px; } .shea-box h3 { font-size: 20px; color: #1d7c3e; font-weight: bold; margin-bottom: 5px; } .shea-box h4 { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px; } .shea-box p { font-size: 13px; color: #555; line-height: 1.4; } /* Flickity Dots */ .flickity-page-dots { bottom: -20px; } .flickity-page-dots .dot { width: 12px; height: 12px; background: #1d7c3e; opacity: 0.5; border: none !important; /* Remove border */ outline: none !important; /* Remove focus border */ } .flickity-page-dots .dot.is-selected { opacity: 1; } /* Make Flickity slides uniform */ .shea-slider .carousel-cell { width: calc(33.33% - 20px); /* 3 columns per slide for desktop */ margin-right: 10px; } @media (max-width: 1024px) { .shea-slider .carousel-cell { width: calc(50% - 20px); /* 2 columns per slide for tablets & Nest Hub */ } } @media (max-width: 768px) { .shea-slider .carousel-cell { width: 100%; /* 1 column per slide for mobile */ } }

What's Great About 100% Shea Butter?

100% Shea Butter deeply hydrates, smooths, and nourishes skin with natural vitamins and fatty acids.

Shea Fruit

Moisturizing and hydrating properties from natural oils.

Shea Fruit

The shea fruit is a sweet, plum-like fruit rich in antioxidants like Vitamin C. It hydrates and nourishes while protecting the nut within, making it essential for both skin care and local diets.

Shea Nut

Naturally rich in Vitamins A, E, and F for skin repair and nourishment

Shea Nut

Encased in a hard shell, the shea nut is packed with fatty acids and vitamins. It’s the core ingredient for shea butter, providing deep moisturization, skin repair, and anti-inflammatory benefits.

Raw Shea Butter

Improves skin elasticity, reduces fine lines and wrinkles.

Raw Shea Butter

Raw shea butter, extracted from the nut, is pure and unrefined. It delivers intense hydration, improves elasticity, soothes irritation, and reduces fine lines, making it a skincare essential.

Shea Fruit

Moisturizing and hydrating properties from natural oils.

Shea Fruit

The shea fruit is a sweet, plum-like fruit rich in antioxidants like Vitamin C. It hydrates and nourishes while protecting the nut within, making it essential for both skin care and local diets.

4

@dreamtechzone_5 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: none !important;
    box-shadow: none !important;
}