Solved

reduce the space between the collection card and text - sense theme

Beautage
New Member
11 0 0

hi, i have changed my collection cards shape, reduce them in size, however now there is a huge gap between the text and image, how do I reduce it? 

 

beautage.co

 

Screenshot 2024-03-08 at 18.04.31.png

Accepted Solution (1)

diego_ezfy
Shopify Partner
2958 568 890

This is an accepted solution.

@Beautage@Beautage, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.card__inner.ratio {
    margin-bottom: -40%;
}

@media (max-width: 749px){
    .card__inner.ratio {
    margin-bottom: -0%;
}
}

 

diego_ezfy_0-1709970845231.png


You can change the -40% value to any other number.


If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

View solution in original post

Replies 3 (3)

diego_ezfy
Shopify Partner
2958 568 890

This is an accepted solution.

@Beautage@Beautage, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.card__inner.ratio {
    margin-bottom: -40%;
}

@media (max-width: 749px){
    .card__inner.ratio {
    margin-bottom: -0%;
}
}

 

diego_ezfy_0-1709970845231.png


You can change the -40% value to any other number.


If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.
Beautage
New Member
11 0 0

Hi @diego_ezfy, that worked! however, now the featured collection section is messed up, and the add to cart button is overlapping with the product image, Is there any solution on how to adjust only the collection images and not the featured ones? thank you

diego_ezfy
Shopify Partner
2958 568 890

@Beautage Oh, my bad, I forgot to apply it only to this section. Please remove the code I shared before and use this one instead:

.section-collection-list .card__inner.ratio {
    margin-bottom: -40%;
}

@media (max-width: 749px){
    .section-collection-list .card__inner.ratio {
    margin-bottom: -0%;
}
}
◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.