I am looking to make the height of my image blocks on the homepage smaller.
I have figured out how to make one of them smaller, but I’m having issues with the block on the left. (See attached image for reference)
Can anyone help with this?
Here is the preview link: https://t7juv4lhlghy1mw5-11985066.shopifypreview.com
Thanks
Please Go to Online Store → Themes → Edit code → Assets → styles.scss.liquid and paste this code at the end of this file.
.home-shop-block {
height: 694px;
}
Hello There,
1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >styles.scss.liquid and paste this at the bottom of the file:
div#shopify-section-16148671091d078a0b .home-shop-block,
div#shopify-section-1610026458571fc21e .itg-featured-carousel1610026458571fc21e .home-shop-block {
padding: 0 !important;
height: 68vw;
}
div#shopify-section-16148671091d078a0b .home-shop-block .home-shop-block-image,
div#shopify-section-1610026458571fc21e .itg-featured-carousel1610026458571fc21e .home-shop-block .home-shop-block-image {
height: 100%;
}
div#shopify-section-1610026458571fc21e {}
div#shopify-section-1610026458571fc21e .itg-featured-carousel1610026458571fc21e {
display: flex;
flex-wrap: wrap;
}
@ZestardTech thanks for the reply, I applied the code and it worked pretty good, but the border around the image is now gone, is there a way to keep the border and achieve this? (see attached images for reference)
Hello There,
1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >styles.scss.liquid and paste this at the bottom of the file:
div#shopify-section-16148671091d078a0b, div#shopify-section-1610026458571fc21e {
border: 5px solid gray;
}
@ZestardTech amazing! is there anyway to make the entire section a smaller height? my client doesn’t want this section to take up the whole fold