Making the Home Page Image Block smaller

mattpermute
Excursionist
42 0 17

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

0 Likes
HardikDavra
Shopify Partner
2327 367 999

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

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Pallavi
Shopify Expert
2220 363 474

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
Excursionist
42 0 17

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

0 Likes
Pallavi
Shopify Expert
2220 363 474

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
Excursionist
42 0 17

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

0 Likes