Studio Theme - Make Featured Product block smaller

[boltandchisel]

Hi, 

I would like to know if there is any way to make the "Featured Product" block on Home Page smaller?

My current home page looks like this. I would like the "Gift Card" block (Featured Product) to be same height as "Our BestSellers" block (this is a "Featured Collection block).

Website Link: https://boltandchisel.com/

Thanks in advance!

[Moeed]

Hey @boltandchisel 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
section#shopify-section-template--19303472333095__649139d6-0863-4373-95d8-1595c546aae9 {
    max-width: 62%;
    margin-left: 361px;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[boltandchisel]

Hi, I tried but it does not change the height of this block. Should we use instead use max_height settings?

[Moeed]

Hey @boltandchisel 

Apologies for the confusion, if you meant to make this section smaller by height then please add the following code.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
img.image-magnify-lightbox {
    height: 65% !important;
}
.grid__item.product__media-wrapper {
    max-height: 309px !important;
}
.product__media.media.media--transparent {
    background: white;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[boltandchisel]

Thanks, but the image is 'overflowing' after putting in this code.... any settings to tweak so image size could be dynamic? 🙏