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

Solved

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

hanbal
Shopify Partner
15 1 2

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

hanbal_0-1676987440336.png

 

 

Thanks

 

olanzu.co

password : 123456

 

Accepted Solutions (2)
PageFly-Richard
Shopify Partner
4668 1069 1726

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Richard
Shopify Partner
4668 1069 1726

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 9 (9)

PageFly-Richard
Shopify Partner
4668 1069 1726

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

hanbal
Shopify Partner
15 1 2

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.

 

hanbal_0-1676989240689.png

 

is this possible to change the code accordingly ?

PageFly-Richard
Shopify Partner
4668 1069 1726

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

hanbal
Shopify Partner
15 1 2

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.

hanbal_0-1676990817998.png

 

 

Thanks

PageFly-Richard
Shopify Partner
4668 1069 1726

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

hanbal
Shopify Partner
15 1 2

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

 

hanbal_1-1676991627401.png

 

 

PageFly-Richard
Shopify Partner
4668 1069 1726

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

hanbal
Shopify Partner
15 1 2

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
Shopify Partner
4668 1069 1726

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.

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.