How can I adjust the height of an image in a text module?

[hanbal]

Hi,

I am struggling to change the height of the image with the text module.

Actually I want to minimize the picture size & then font according to my requirement, but it looks it has fix size minimum size height.

Here as you can see in the picture my text portion is less and also want to decrease the height of the image proportionally so I can make the height of the overall section small according to my image height or my requirement.

here is image

Thanks

olanzu.co

password : 123456

[PageFly-Richard · Accepted solution]

Hi @hanbal ,

You can try replace previous my code by below code:

@media screen and (min-width: 750px) {
    .image-with-text__content {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .image-with-text__media {
        padding: 0 !important;
        border: 0;
    }
    .image-with-text__media img {
        object-fit: contain !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[PageFly-Richard]

Hi @hanbal ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-image-with-text.css->paste below code at the bottom of the file:

@media screen and (min-width: 750px) {
    .image-with-text__content {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .image-with-text__media {
        padding: 0 !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[hanbal]

Thanks for the assistance.

It's making heigh short but I want that it also adjust the image according to height instead of cropping the image.

see an image showing now.

is this possible to change the code accordingly ?

[PageFly-Richard · Accepted solution]

Hi @hanbal ,

You can try replace previous my code by below code:

@media screen and (min-width: 750px) {
    .image-with-text__content {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .image-with-text__media {
        padding: 0 !important;
        border: 0;
    }
    .image-with-text__media img {
        object-fit: contain !important;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[hanbal]

You are a great Man

Is there any way I can change the background colour for the image with text grid + text portion, I mean complete background colour.

as shown below image.

Thanks

[PageFly-Richard]

Hi @hanbal ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-image-with-text.css->paste below code at the bottom of the file:

.image-with-text {
    background: #eee;
}
.image-with-text__content,
.image-with-text__media {
    background: transparent !important;
}

I hope it would help you
Best regards,

Richard | PageFly

[hanbal]

Yes, it's working but only within the grid. is this possible that we can change the colour of the white border background shown in the images? so that also looks like the part of this section.

Thanks

[PageFly-Richard · Accepted solution]

Hi @hanbal ,

You can try below code in component-image-with-text.css file:

#shopify-section-template--17631741575475__c5ddeb6f-b9fd-4705-8884-d7e7721dcca8,
#shopify-section-template--17631741575475__6d0b2a32-8b80-4047-8c80-c027bdfa58a2 {
    background: #eee;
}
.image-with-text__content,
.image-with-text__media {
    background: transparent !important;
}

I hope it would help you
Best regards,

Richard | PageFly

[hanbal]

Is this possible to change it in my required text with the image module, instead of just changing it in the specific module only?

I mean I can get the custom code that I can enter in the custom css box where I want to change the background colour of this section.

[PageFly-Richard]

Hi @hanbal ,

This may not be the case. Because this section has no class that distinguishes it from the rest. If you edit the same class, it can affect other sections.

I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.