(Sorry!) I know there’s been quite a few topics with this problem but I tried their advice and I still can’t find what’s causing the extra space on the right.
The extra margin on the right appears only on Tablet and Mobile views when it’s LIVE rather than in editor.
Your margin bug happen because you’ve set some animations of object entering the page. But as they wait outside before animating, and for some of them, stay a bit outside the viewport even after animation happen, the viewport is then extended. overflow:hidden tells the browsers to ignore overflowing content so they don’t enlarge the viewport width value.
If you had named those elements in anither manner you’d have had only 1 operation to make to solve this. Like all the element scould have beennamed hp then have an extra class hp_something. You’d have then to select the hp level and add the property. It’s a good idea to leave a level of common naming to elements that are similar (in this case, divs representing sections of the page).
You’ve chosen to build a narrative one pager, one that tells a story broken down into sections.
There’s a way to make it both easier to navigate and more efficient at capturing leads: add meaning to everything and bring actions to the narration.
At the moment you have this structure:
welcome manual scroll
we’re an agency manual scroll
We’ve gOt Rules in OuR land manual scroll
gOOd vibes Only. manual scroll
get Obsessed. manual scroll
be OPen tO change manual scroll
nO bullshit. manual scroll
substance & style manual scroll
contact
There are 3 aspects you can make better:
navigation : for some, like me on a tablet or someone on a trackpad, it’s a lot of actions to scroll the complete page (it takes me 45 scroll actions with my tablet to reach the form at the end)
incentive to continue reading
opportunity to contact you (generate a lead)
For 1., you can put a link that will scroll to the next section (using unique IDs and link to anchor)
For 2., you name the link we just talked about in a way to introduce what’s come next
For 3., you can propose, at each step, a direct link to the contact form
welcome
[read about us] or [contact us] automatic scroll
we’re an agency
[read about our philosophy] or [contact us] automatic scroll
We’ve gOt Rules in OuR land
[read about our vibes] or [contact us] automatic scroll
gOOd vibes Only.
[know what we’re obsessed about] or [contact us] automatic scroll
etc.
You can vary the order of actions, not put the contact us on all sections, make the links more or less discreet, o-use a down arrow icon for link to next section or not… The goal here is to always propose an action, give an incentive to continue to engage with the page with a peek at what comes next, and propose a secondary alternative.
