Hey guys, I’m having trouble with my ‘More Designs’ page. On desktop, the page is split into two columns and the header (reading “DESIGN DOESN’T SLEEP”) works as intended (static). However, once responsive on mobile, the header and body stack in one scrolling column, which I don’t mind, but the heading then begins to overlap the body text that begins scrolling below.
I’ve searched all related forums I could find and tried to implement a few possible solutions with no luck. Please feel free to check out the desktop VS mobile experience of my ‘More Designs’ page. I thank you in advance for any advice, suggestions or solutions!!
Hi @UX_Gee !
Two simple solutions for this:
1- If you don’t want the heading to be sticky on mobile, then just set it’s position to static or relative on mobile, that will not affect the desktop version and the header will be scrolled past on mobile.
2- If you want to keep the stick interaction for the heading, you can add a white background to the sticky div so when it overlaps with body text it totally covers it and text doesn’t overlap.
I hope this was useful. Let me know if this answers your question.
Cheers,
Adry
Hey @_Adry, thank you for taking a moment to respond! I used your second suggestion and added a white background on the heading which mostly solved my problem! Now my text seem to scroll underneath my static header, but there is still a small open area at the top where you can still text when scrolling as the headers height or positioning is off. So I’ll have to fiddle with those aesthetics later, but I thank you again for your great suggestions to get me moving again!
Hi @UX_Gee ! Glad I was of help. For the little visible area above the stick div. I’d make the stick div (.Licesing-Hero-Grid-Left)stick from 0px from the top instead of 2 rem and add padding for it so the text has some room from the top and bottom. The white background should be added to the same div as well not for the text div
