Reduce the size of image in image with text section and show the full image

Shopify Discussion

Topic summary

A Shopify store owner requested help to reduce the size of an image in the “image with text” section on desktop while displaying the full image (not cropped) on both desktop and mobile.

Problem Details:

  • The image appeared correctly on mobile but needed size reduction on desktop
  • The image was being cropped rather than shown in full
  • Store URL and screenshot were provided for reference

Solutions Offered:

  1. CSS object-fit approach (tim_1): Add object-fit: contain; to the image-with-text img selector in the section’s Custom CSS

  2. Media query padding adjustment (Mustafa_Ali): Remove padding on desktop viewports (768px+) by modifying theme.liquid file

  3. Automated snippet tool (sgtlab): Provided a custom CSS snippet with installation options via their shop-booster tool

Resolution:
The issue was resolved successfully. The original poster confirmed one of the solutions worked, though they didn’t specify which approach they implemented.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi, could anyone help me reduce the size of image in image with text section and show the full image in both desktop and mobile. Thank you!

here’s my store url: https://u1130y-zj.myshopify.com/

image with text.jpg
image with text.jpg1239×750 83.9 KB

2

I see it looks nice on mobile but I want to reduce the size on desktop make it smaller and show the full image not to remove it

3

Try adding this code to the “Custom CSS” setting of this section:

.image-with-text img {
  object-fit: contain;
}

This way your image will always be shown in full.

4 
@media screen and (min-width: 768px) {
.page-width {
    padding: 0px !important;
 }
}

Mustufaali_0-1743492147454.png
Mustufaali_0-1743492147454.png1228×618 226 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

5

@jabee01

Here is your snippet.

Follow this to setup the snippet code. no need to modify your theme!

  1. Click “Preview” to see the fix.

  2. You can install the script automatically or manually.

https://shop-booster.sgt-lab.com/snippet/u1130y-zj?snippetId=1743496591871

6

Thanks it worked!

1 Like