Hi, can you please make this picture half size in height (smaller) without cutting the image. Thank you
Pass: biangu
Url: www.matibrnd.com
Topic summary
Goal: Reduce the height of a specific image by about half, without cropping, on a Shopify store (URL and storefront password provided).
Proposed solutions (not yet confirmed):
- Add custom CSS in Online Store > Theme > Edit code > Assets > base.css targeting the Image-with-text media image.
- Option A: width: 70%; height: 75%; object-fit: contain;
- Option B: width: 75%; height: 70%;
- object-fit: contain keeps the entire image visible while scaling down.
Notes:
- The exact width/height percentages may need tweaking to achieve the desired “half height” look across devices.
- Ensure the selector matches your theme’s Image-with-text section so the rules apply correctly.
- A screenshot was provided to show the target image; CSS code snippets are central to the fix.
Status: No confirmation from the requester; outcome remains open.
hello @MT27 ,
Here is the code you can try. I hope it useful-
Go to the Online Store-> Theme-> Edit code-> Assets> base.css → Add code at the bottom.
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media img {
width: 70%;
height: 75%;
object-fit: contain;
}
If there is anything that needs to be clarified or included, please let us know. We will surely help you.
Have a nice day!
Hi @MT27
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
.image-with-text__media.image-with-text__media–adapt.gradient.color-background-1.global-media-settings.media img {
width: 75%;
height: 70%;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly