Debut Theme Add to Cart - Formatting Issues

Solved
Highlighted
Tourist
3 0 1

Hi,

I added the following code to the end of the product-card-grid.liquid snippet:

{% comment %}
Next bit of code has been added to include "Add to Cart" button below every product in a grid, without the quantity displayed
{% endcomment %}

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="Add to cart" class="btn" />
</form>

The code itself works fine, however, I have some undesired formatting issues with this code added, see attached image.  

Is there any way to reduce the white space between the price and the add to cart button?  Also, on all of the product collection pages on the last row the button overlaps the footer.

Thanks!

Terry

Screenshot 2020-06-18 at 10.07.56.png

1 Like
Highlighted
Shopify Partner
4726 700 1492

Hello, @terryp 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
3 0 1

Hi @KetanKumar 

Thanks for the reply!

https://bottled-baking-co.myshopify.com

Terry

 

0 Likes
Highlighted
Shopify Partner
4726 700 1492

if you have front end password is confidential so please to a personal message as you like.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Shopify Partner
4726 700 1492

This is an accepted solution.

Hello, @terryp 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.grid-view-item {
margin-bottom: 0;
}
.grid__item--collection-template {
    margin-bottom: 50px;
}
.grid__item--featured-collections {
    margin-bottom: 30px;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
3 0 1

Hi Ketan,

Worked perfectly thank you!

I don't suppose you could point me in the right direction on one more formatting tweak?  On my "About" page, I similarly have large white space between the sections, I did try and modify the section header padding though it didn't see to have any effect, I assume I am changing the wrong thing?

Thanks again!

Terry

0 Likes
Highlighted
Shopify Partner
4726 700 1492

This is an accepted solution.

@terryp 

.template-page .section-header {
    margin-bottom: 0;
}
#shopify-section-feature-row-2 .feature-row__item.feature-row__text {
    padding-top: 0;
    padding-bottom: 0;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like