It works on desktop and iPhones, but not tablet or Android phones. I have contents inside containers, but they seem to overlap. Plus, it seems like the tablet and mobile version on android are pulling from the ‘desktop’ layout and not from the right layouts which I created specifically for them. I hope this makes sense.
I’m new to web builders like this, and have used Squarespace to insert padding between objects in the past. Does anyone know how to fix this?
Hey Elizabeth, Im Ido from the Editor X team.
I went over your design, and I have some tips that can help you,
I’ll show you examples of specific issues, but these may be recurring in your site so make sure you check thoroughly all over your site,
first of all I noticed that you have minimum height set in pixels on most of your sections, this is a default created by editor x so the section will not collapse when there is nothing in it but after there is content inside its better to set this to none because other wise it creates large gaps in your layout when viewing at lower screen widths.
you can also check out this [post:](post:
https://www.editorxcommunity.com/forum/expert-tips/expert-tip-what-to-look-out-for-when-your-section-s-height-won-t-shrink)
[https://www.editorxcommunity.com/forum/expert-tips/expert-tip-what-to-look-out-for-when-your-section-s-height-won-t-shrink](post:
https://www.editorxcommunity.com/forum/expert-tips/expert-tip-what-to-look-out-for-when-your-section-s-height-won-t-shrink)
another thing that i noticed is that you have stacked text and it’s top margin is set to a pixel value, this is what causes overlapping on different screen sizes,
what I recommend is setting the top margin in percentage that way it will be responsive.
Hope this helps, feel free to ask more questions if you have them,
Have a great week,
Ido.
Hi Ido! Thank you so much for the response. One follow up question however. I understand how the percentage ties it to the container or section now, but is there a way to make sure the image and the stack below it never overlap?
For example, the way I’m getting around it is to place the text below the image at around 70% margin percentage from the top of the container, but I have a feeling there’s a better way to do it.
Thanks,
Elisabeth
Yes, you can add the image to the stack as well, the stack is intended for exactly this purpose, to maintain vertical relationships between elements.
I already tried that initially, but when I stack the elements on the tablet or mobile version, it reflects back onto desktop (where the layout is different and they are beside each other left and right)
Second question, is there a way to maintain horizontal relationships between elements, similar to vertical stacks?
Ok so to answer both your questions, you can use grid, i’ve attached a short video explaining how to do this in your layout
@idoh This is sooooo helpful, thank you so much. I have alot of work to do but happy I found a solution. Have a great day and thanks again!
