Level 3
Its kind of hard to figure out the solution without whole code, but I would go with something like following code, it will give you a basic idea.
.carousel-cell a{
display:inline-block;
margin:0 1rem 0 1rem;
}
Dec 26, 2022
1
Level 1
Css borders are link to each other
I created a caurosal of 8 products when i apply a border than border are joint to each other. i did not create class because all are created dynamically. if i decrease the width the another product that are hide on another caurosal are shown. how i fix it
https://i.ibb.co/t8zvY1S/2022-12-26-11-03-29-Window.png
<div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(0%);">
<a href="/collections/activities-storybooks-kids/products/personalised-goodnight-storybook-girl">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/GOODNIGHT_books-01.jpg?v=1520416066">
<h4>Personalised Goodnight Storybook - Girl</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="81743151117" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 1,350</span>
</div>
<!-- <input type="number" id="quantity" name="quantity" value="1" min="1"> -->
<input type="submit" name="add" class="btn" id="product-add-to-cart" value="Add to Cart">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(100%);">
<a href="/collections/activities-storybooks-kids/products/personalised-goodnight-storybook-boy">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/GOODNIGHT_books-04.jpg?v=1520416051">
<h4>Personalised Goodnight Storybook - Boy</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="81757011981" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 1,350</span>
</div>
<!-- <input type="number" id="quantity" name="quantity" value="1" min="1"> -->
<input type="submit" name="add" class="btn" id="product-add-to-cart" value="Add to Cart">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(200%);">
<a href="/collections/activities-storybooks-kids/products/stories-for-1-year-olds">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/stories_for_1_yr_old_6e9cdfeb-6ba4-4b57-893d-f0165014e016.jpg?v=1495545024">
<h4>Stories for 1 year olds</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="1824342913" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 250</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" disabled="" value="Sold Out">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(300%);">
<a href="/collections/activities-storybooks-kids/products/my-learning-library-first-words">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/Learning_Library_-_Words.jpg?v=1537694862">
<h4>My Learning Library - First Words</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="695380246574" id="add-to-cart-form">
<div class="prices">
<span class="compare-price">Rs. 799</span>
<span class="price on-sale" itemprop="price">Rs. 599</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" disabled="" value="Sold Out">
</form>
</a>
</div>
Please or to participate in this conversation.