Repeaters showing wrong in mobile version

Question:
How can I make repeater boxes look the same size on mobile version?

Product:
Wix Editor

What are you trying to achieve:
Repeater is showing wright on desktop version but in the mobile one it changes randomly the sizes of the boxes. How can I solve this? I’m going crazy trying to make it look good.

What have you already tried:
I don’t know what else to do because it is not possible to modify the mobile version for this. The moment I try to change the size of one box, the others change randomly.

Additional information:
This is how it looks on mobile:

]

Hi, Daniela_Alcala !!

Are you saying that only the third container box is slightly larger? I believe it’s likely due to the text elements inside being larger than the others. :thinking:

Hi, onemoretime! Thank you for answering me.

There are 10 containers, you can see them here https://www.romeda.com.ve/.
In the desktop version it looks right, but to achieve that I had to make all text containers to have three rows, like this:


If I don’t do it like this, the gray containers start to change size. But that’s not working for the mobile version.

I understand why this phenomenon occurs with the repeater. :slightly_smiling_face: I recreated the situation on my end, And, it looks like the height of the container boxes within the repeater is controlled to match the tallest one, so you’ll need to set the height of the shorter container boxes to be the same as or greater than the height of the tallest container box. In your case, I think you should select the container that holds the “Food Icon” and set its height to be equal to or greater than the container holding the “Medicine Icon.” :raised_hands:

Thank you so much for taking the time to recreate it.

I’m not sure if I’m getting it right. If I add a line to the “Food Icon” to make it greater, this is what happens:

The largest boxes have three lines (“House and Car Icon” and “Crops”), so I make them all to also have three lines with empty breaks.

The desktop version already has uniform height, so there’s no need to apply this change there. Please revert the change and try applying the same adjustment on the mobile version instead. :raised_hands:

1 Like

Thank you, but it is not possible to do that kind of adjustments on the mobile version. It only allows to change the text size, color and alignment because it’s tied to the desktop primary settings :confused:

Do you know if there’s a way to access the code? Maybe there I can get to the solution, don’t you think?

Hi, Daniela.

You don’t need to change the text elements. In the mobile version, select the container box within the repeater that has the smallest height, and increase its height to match the size of the tallest container box in the repeater. When making this change, it’s convenient to enter the height value directly in the panel on the right. :raised_hands:

The reason you cannot get them to size correctly is because you are not connecting a dataset to the repeater AND it will inherit the largest possible size based on the largest possible text.

I know you are not using a database because you have the link icon connected instead of the data icon.

If you were using the repeater connected to a database then you could make the placeholder text 1 word. Like “titleHere”. Then after you connect the text to the database the container box will auto resize to the length of the text in the database NOT the length of the text in the repeater.

BUT ….

Since all you have is static text that doesn’t necessarily require a database and you want everything equal in size —— I recommend you do not use a repeater.

Instead, you should use a strip with 5 columns. Fixes your desktop and mobile problems.

:smiling_face:

1 Like

Thank you both, for taking the time to help me.

Unfortunately, none of the options worked :worried:

The first one, I already tried it and the moment I change the size of one box the others do it automatically too.

I tried with the strip with columns and it has the same behavior.

Maybe the solution is to change the design by making still images, instead of separated elements inside the boxes. Then the strip option should work well.

:crossed_fingers:

Still images are bad for SEO.

Try one more thing….

Do the strips with columns for desktop. But add another strip with 1 column. And add regular boxes, text and icon. Using Dev Mode and the code panel at the bottom of the page, collapse on load —— that last strip.

Now go to the mobile, hide the original strips and UNhide the strip with the boxes. You should be able to manipulate your boxes freely.