How to adjust space in Images with text scroll - prestige

Shopify Discussion
1

Hello everybody,

I’m using Prestige and in one page I have a Image with text (standard) with the image on the right starting at the left side til the middle of the screen (50%). Below I have a Images with text scroll. Usually it has the image very small but using some css I upscale it a little bit, the problem now is that it start at the left side but it ends before the 50% of screen, and this is horrible to see compared to the box above. How can I fix this ?

Thank you!

2

Hey @Riccardo-MANO-Jewels

Can you share the URL of that page in which you have that section?

Best,
Moeed

4

Hello @Riccardo-MANO-Jewels
You can achieve this by adding the following code to the file named sections/images-with-text-scroll.liquid, immediately before the {% schema %} tag:

{% style %}
  @media screen and (min-width: 750px) {
    #shopify-section-{{ section.id }} .images-with-text-scroll__container {
      width: 100%;
      max-width: 100%;
      margin: 0;
    }

    #shopify-section-{{ section.id }} .images-with-text-scroll__item {
      width: 100%;
      max-width: 50vw;
      margin: 0;
    }

    #shopify-section-{{ section.id }} .images-with-text-scroll__image,
    #shopify-section-{{ section.id }} .images-with-text-scroll__item img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
{% endstyle %}

If you want the section to match the one above more closely, change 50vw to 50% or another value. This is more reliable than using a hardcoded section ID because it uses the dynamic section ID.

Before editing your theme, it’s a good idea to duplicate the theme first as a backup.

5

@Moeed not sure of exact page but here is a link to store https://www.mano-j.it/

But @Riccardo-MANO-Jewels I noticed that all pages under “Italian touch” are very wrong. Lot of empty space images and text all over the place. Maybe some Javascript errors, and you might use PageFly so check those pages out.

Maybe think of boxed, narrow container that is centered instead of full width page it may look strange. For me Prestige about us page from demo looks pretty good.

And like Moeed said, please share exact URL of page in question because all else would be gussing.

6

I’d first compare sections in DevTools to see whether the width, padding, or parent container is causing the difference before changing more CSS. Matching the same container structure usually solves these alignment issues. If you’re testing multiple layout ideas, that gives a variations tools like Pikes AI or CapCut can also help quickly refine product visuals of different section layouts before making theme changes.

7

Hi @Riccardo-MANO-Jewels

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

8

Hi,

It sounds like the image isn’t filling the full 50% width of the section. First, check the image dimensions and make sure you’re using a high-resolution image. If the image is large enough, look for settings such as “Image fit,” “Adapt to image,” or “Full width” in the Image with Text section and try adjusting them.

If you’re using custom CSS, there may also be a max-width value limiting the image size. Sharing a screenshot of the section settings or the page URL would help identify the exact cause.

Thanks!

9

Hello there @Riccardo-MANO-Jewels
If you have resized the image with css you will also need to set the container width and grid to be the same 50% split as the regular Image with Text block. Open up each section in your browser’s developer tools, and notice the wrapper classses, max width, and grid column size for each. Where you can, copy the same layout properties from the working section rather than just scaling the image, that typically keeps the two section aligned nicely.