Shopify themes, liquid, logos, and UX
Hi all!
I've been playing around with the code and managed to get some things changed but also managed to mess up some of the borders/margins so there are some weird gaps!
Can anyone tell me how to reduce these margins again?
My website is : www.roxiesweetheart.co.uk
I've attached screenshots of the areas I need changing (marked with red) within a doc. file (not sure why I can't upload images)
Thank you 🙂
Solved! Go to the solution
This is an accepted solution.
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-index .main-content {margin-top: 0;}
.shopify-section--slideshow:not(:first-child)+.shopify-section--slideshow .hero--adapt, .shopify-section--slideshow:not(:first-child)+.shopify-section:not(.shopify-section--full-width) {
margin-top: 10px;
}
.index-section {margin-bottom: 10px;}
This is an accepted solution.
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.collection-card {height: 335px;}
.product-card__image-container {margin-bottom: 100px;}
This is an accepted solution.
i have check again its work as well just product name long issue
This is an accepted solution.
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-index .main-content {margin-top: 0;}
.shopify-section--slideshow:not(:first-child)+.shopify-section--slideshow .hero--adapt, .shopify-section--slideshow:not(:first-child)+.shopify-section:not(.shopify-section--full-width) {
margin-top: 10px;
}
.index-section {margin-bottom: 10px;}
Thank you!
That worked for the gaps at the top and under the gallery but I also need to make the margins between the products photos and product titles in 'what's new' and 'gifts under £10' on the main page please
Thanks again 🙂
if reduce spacing see issue
It looks okay to me... what is the issue?
Thank you
product card box doesn't anglin
I can't really notice! Can you send me the code so I can try it please?
Thank you 🙂
look at this
Text and images dont completely align as it is anyway if you look at the current live website
do you need any help?
Yes I want to reduce the spacing
thank you
This is an accepted solution.
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.collection-card {height: 335px;}
.product-card__image-container {margin-bottom: 100px;}
great that worked! Can I do the same to the collection underneath too?
that's work whole site
This is an accepted solution.
i have check again its work as well just product name long issue
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024