Making the Home Page Image Block smaller

mattpermute
Explorer
68 0 27

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

Replies 5 (5)

Hardik29418
Shopify Partner
2859 407 1073

@mattpermute 

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;
}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
ZestardTech
Shopify Expert
5393 970 1291

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
mattpermute
Explorer
68 0 27

@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)

Screen Shot 2021-07-22 at 12.09.29 AM.png

Screen Shot 2021-07-22 at 1.38.17 AM.png

ZestardTech
Shopify Expert
5393 970 1291

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
mattpermute
Explorer
68 0 27

@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