How do I enlarge images in the "text columns with images" section

[RheaKalo]

Hi! 

How can I enlarge images in the landing page under the columns/images section? 

rheakalo.com (the 3 images under the main large one)

[dws_pvt_ltd]

Hello @RheaKalo 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file -> Save

<style>
.feature-row__image-wrapper .feature-row__image {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
}
.feature-row__image-wrapper {
    max-width: 100% !important;
}
.feature-row__image-wrapper div {
    padding-top: 100% !important;
}
</style> 

See images

Best Regards,
Dws_pvt_ltd

[Moeed]

Hey @RheaKalo 

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) {
.feature-row__image-wrapper .feature-row__image {
    max-width: 100% !important;
    max-height: unset !important;
}
.feature-row__image-wrapper {
    max-width: 100% !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[RheaKalo]

thank you. this didn't work.. the stayed the same size..

[Moeed]

Apologies for the confusion, I've updated the code. Kindly try it out again.

Best Regards,

Moeed

[dws_pvt_ltd]

See my result and add my CSS to your store. Thank you.

[BSSCommerce-B2B · Accepted solution]

@RheaKalo , Use this code before </body> in theme .liquid file

<style>
@media screen and (min-width: 768px) {
.feature-row__image-wrapper .feature-row__image {
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100%;
    object-fit: cover;
}
.feature-row__image-wrapper {
    max-width: 100% !important;
    flex: 1
}
#shopify-section-feature_columns_qYaeVh .grid__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: inherit!important;
    float: none;
}
#shopify-section-feature_columns_qYaeVh .grid {
   display: flex; 
}
}
</style>

Result: 

[RheaKalo]

THANKS! this worked -  but the buttons are now very elongated. can the box be just around the fonts?

[BSSCommerce-B2B]

@RheaKalo, Sure change the previous code like this

<style>
@media screen and (min-width: 768px) {
.feature-row__image-wrapper .feature-row__image {
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100%;
    object-fit: cover;
}
.feature-row__image-wrapper {
    max-width: 100% !important;
    flex: 1
}
#shopify-section-feature_columns_qYaeVh .grid__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: inherit!important;
    float: none;
    align-items: center;
}
#shopify-section-feature_columns_qYaeVh .grid {
   display: flex; 
}
#shopify-section-feature_columns_qYaeVh .grid .btn {
   width: fit-content;
}
}
</style>

Result: