3 images sizes

Store Design
, ,

Topic summary

A user seeks to reduce the size of a three-image section by approximately 60% to match the width of adjacent paragraph text, as the images currently span full screen.

Solution Provided:

  • Custom CSS code was shared to constrain the image block width using max-width properties
  • The code applies responsive sizing: 78rem for screens ≥990px and 50rem for screens ≥750px
  • The solution centers the image block using margin: 0 auto

Outcome:
The original poster confirmed the CSS solution worked successfully and expressed gratitude for the assistance.

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

Hi I have a section with 3 pictures that I wish to make smaller by 60% apporximatelly, I want the three pictures to fit the paragraph text parallel lines :

Artez_0-1750573536760.png
Artez_0-1750573536760.png1890×920 325 KB

now its full screen i wan it to be exactly as the paragraph weight dimension.

Can you help me please?

https://artez.design/pages/marketing

Warm regards.

2

Hi @Artez

Let try to add this custom css code:

.shopify-section .ai-three-images-block-adlhlmfk0dliva2nmraigenblockf7409f5nbdh4i {
  margin: 0 auto;
  max-width: var(--page-width);
}
@media screen and (min-width: 990px) {
  .shopify-section .ai-three-images-block-adlhlmfk0dliva2nmraigenblockf7409f5nbdh4i {
      max-width: 78rem;
  }
}

@media screen and (min-width: 750px) {
  .shopify-section .ai-three-images-block-adlhlmfk0dliva2nmraigenblockf7409f5nbdh4i {
      max-width: 50rem;
  }
}

BiDealDiscount_0-1750577145161.png
BiDealDiscount_0-1750577145161.png1405×958 197 KB

1 Like
3

thanx brother, really helpful. I did not forgot that I awe you.
Lost my card, hope to find it soon or i will order a new one.

Warmregards

4

Thank you. Great to see you, Artez!