Text overlay on top of image carousel not displaying correctly on iPad

Technical Q&A
1

Apologies but I am very new to Shopify and not sure what to do. I asked AI to generate a moving carousel of up to 8 selectable images with a custom text box that sits on top of the images in the middle of the screen. Much to my surprise it worked exactly as intended on desktop and Android. However, on iPad it displays the images ok but the text box does not work as intended. Rather than the aforementioned behaviour the text box displays as a vertical line on the far left of the screen. The box is in effect 1 character wide. I am guessing some code needs to be changed to handle the ipad but I have no idea. Unfortunately, I don’t have access to an iPhone at the moment to check that and am a little concerned that might cause a problem.

Many thanks for any advice.

2

Hi @alibev

Welcome to the community.

First, it would be useful if you could share your store so we could check it out.

Next, you could use BrowserStack to test on different devices.

But other than that, it could be some position: fixed or maybe overflow: scroll but could be other issues as well.

3

Many thanks for your quick reply. My store is performancebooks.co.uk

For testing your advice sounds very sensible.

4

@alibev think your issue is solved, can you please share the screenshot where you are facing this issue?

5

@alibev

Try this, in code

.ai-product-carousel-angxcnmtkvnjaourtvaigenblockcff3ac0waihaj {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    background-color: #f4f4f4;
}

Add one more line display:flex; so it looks like

.ai-product-carousel-angxcnmtkvnjaourtvaigenblockcff3ac0waihaj {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    background-color: #f4f4f4;
    display: flex;
}

That should make the text go back to the centre.

6

Hi once again and thanks for your continued support. I managed to find out how to change code and played around on a test site.

The change you recommended looks simple enough to implement but I can’t work out where to make the change. I found plenty of sections that are similar to your example but not quite the same.

Is there anything I could do to help identify where to add the extra line in?

Many thanks

7

Not sure if that last part “angxcnmtkvnjaourtvaigenblockcff3ac0waihaj” is autogenerated in the section, but if you can not find it with search in the theme code editor, then you could try this. In the Theme editor for that page you have anounsment bar and a header. The next section is AI-generated. So in the theme editor, just right click (make sure inspector icon in top right is blue) on your carousel section and select edit code. IT will open the right section. There, near the top, you will see tag, inside is the code you want to change.

As an example, here is mine Hero section, so just right-click on it in the page

scrnli_lYQK96pOAGViOp
scrnli_lYQK96pOAGViOp1920Ă—1062 232 KB

8

Many thanks once again. I wish I had your knowledge. I have had a partial success with your suggestion. The text box overlay is now sitting in the middle of the carousel where it should be. Thank you. However, the background for the carousel itself has changed to white. Not sure why that would be as I promise I didn’t touch anything else. I could live with it that way and in one sense it may even look a little better. Having said that something tells me it should be the same as the rest of the page. I made the change in line 14 below.

image
image868Ă—859 34.5 KB

9

Thank you for the code. Yes, it does seams to have generated id, my bad.

But for a white background, remove line 13, with background-color and it would be fine.

Also if I may suggest, find line with .ai-product-carousel__image-{{ ai_gen_id }}
and add one more line to look like

  .ai-product-carousel__image-{{ ai_gen_id }} {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 250/384;
  }

so that way all images will be same size, as currently some are shorter.

10

It all works. Thank you so much I am very grateful. That fix would have taken me days if not longer.