Hi,
On the website I’m designing I am using a repeater to present the list of projects. In the repeater settings I can set up the vertical margin between the items. This works well on default desktop, tablet and mobile size. The problems begin when I test the responsiveness, because that is when the margins become smaller and smaller and items start to overlap, and I can’t set up position for individual items. How should one solve this problem?
Also, sometimes when I go and check the live version of the website, my database items are not showing. Sometimes they do show up. Why could this be? It is very unreliable. This issue is not connected with me not syncing the sandbox to live, because I do. Anyone else experiences this problem? Any ideas on solving this?
And the last one from me, I have one section on one page that is constantly overlapping with the navigation bar, I checked the padding and it’s fine, I can’t figure it out! I’m sharing the screenshot of my editor with this.
And the link to my live page: https://hanastojakovic.editorx.io/porticus-website
Thank you!
Do you mean the scrolling effect on the images - reveal? You can add it on any image; click on the image → image settings → scroll behavior → reveal
I’m Roni, Product Manager from the Editor X team. Happy to try and help!
I’ll start with the last point:
We are aware of a specific bug that can cause this. Here’s what you can do to take back control of those overlapping sections:
Set the scroll behavior of your Header back to “None”
Make sure it is moved up to be at the top of the page
Set it to “Fixed” again.
This should solve it. By the way, in general just unchecking and re-checking the “Keep section’s space in page” checkbox should also fix the issue. But your section also had to be moved to the correct position.
Now to your first point: Can you please share an example? A screenshot, or a link to a page where you encounter the issue? I’ll then be able to better understand it and look into it.
And lastly, about the items not showing up on the live site - I’m actually not aware of such an issue. What you describe is elusive, and hard for us to reproduce. The best course of action I’d suggest is that when you encounter it again, contact our Support team, who will be able to look deeply into the problem.
I hope this helps, and waiting for more info from you about the Repeater margins issue.
The trick with the header worked, and now the section and header are not overlapping anymore which is great, thanks!
Regarding the spacing between items in the repeater, I recorded a short video of my editor while change the sizes of screen so you could understand the problem more. I set vertical spacing to 20px but it’s constantly changing, I can’t set it to be right at every possible screen size. Hope I’m just overseeing what the cause of this is.
Regarding items not showing live, yes, I’ll then contact the support when it happens again. I wondered if it could be just due to bad internet connection? But they don’t appear at all, unlike images that are not connected to database which just load slower when this is the case.
About your Repeater. It’s fixable! And it touches something deep in the understanding of sizing in Editor X.
In your repeater, you have a row that changes its size - the row with the picture in it. In such situations, when elements or grids are getting smaller, you may need to make sure that everything that relates to them, and their parents are able to resize with them. So you always need to check everything around.
In this case - check the height of the other rows in the repeater item. If some of them are in px, they might start to look very big in comparison to the row that is shrinking. So set them in a fluid unit as well (if you want to).
Now check the Repeater item. Make sure its height is set to Auto so it can grow and shrink with the content inside. Also make sure it doesn’t have a min-height blocking it from resizing at some point. If it will have some sort of set height, it will not shrink, and a gap will start to form between its bottom edge and the content inside it.
Next, do the same for the Repeater as well. In your case, the Repeater is stretched to fill the section it is within. So in itself it is flexible, but you also need to make sure the section is. So check the Section. It should also be set to Auto, with no min-height.
This practice is very important and will help you find problems in your layout in many other situations. Let me know if it helped!
@roni-fialkow Hi Roni, thank you very much for the reply.
As you said, the problem was that the Item height was set to px value, I switched it to Auto.
Something else unexpectedly appeared when I changed the height value on all breakpoints. Now the margins between the items are abnormally huge, although the margin value is set to 10 px. Would you know what could be the reason for this be?
This response was very helpful for me as well. I purposely made as much in repeaters as possible and they are not changing when going into the smaller brake points. I am going to try the suggestions you stated above. thanks for the information.
