Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
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.
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.
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 ?
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.
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
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.
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
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.
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.
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024