So I created this sticky position scroll effect using a grid. It works almost to perfection on the desktop; the text uses scaling text, and all the items are in percentage. Yet when I try to view it on tablet or mobile, the grid does not translate, leaving a big gap to the right.
Additionally, I have found that once published, for some reason, the scroll effects overlap even though they don’t when I test them on the editor preview.
Thanks for the link to the site and the screenshots. It’s hard to tell definitively but based on the first screenshot with the mobile breakpoint, something is probably overflowing (most likely one of the textboxes) and is causing the gap to the right. That may be the same case for the tablet breakpoint. You can use the site checker to locate overflow items.
As for the overlap, if you’re using VH for the section or grid, it might not be enough to fit the content within. I might suggest checking with the preview and adjusting the height to see if at all fits. Might either need to make the content smaller or adjust the height of the grid rows or section.
Thanks for the link to the site and the screenshots. It’s hard to tell definitively but based on the first screenshot with the mobile breakpoint, something is probably overflowing (most likely one of the textboxes) and is causing the gap to the right. That may be the same case for the tablet breakpoint. You can use the site checker to locate overflow items.
As for the overlap, if you’re using VH for the section or grid, it might not be enough to fit the content within. I might suggest checking with the preview and adjusting the height to see if at all fits. Might either need to make the content smaller or adjust the height of the grid rows or section.
