Streaming live at 10am (PST)

Extra (Right) Margin on Mobile and Tablet View


#1

Hello there,

(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.

Please can someone help me with this!

Thank you so much in advance,

Here’s my link: https://preview.webflow.com/preview/milk-honey-ldn?preview=20aa76a079e30a5b781328f588fe3858

Simona


Here is my public share link: LINK
(how to access public share link)


#2

Select each one of your hp-xx elements and give them overflow:hidden

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).


#3

BTW your site is very nice. I like this graphic style, mix of straight modern typeface with inked/engraved style illustrations.

Do you mind receiving feedback about it?


#4

Thank you so much @vincent that solved it! I will now know for next time!

And of course, I’d absolutely love some feedback! :smiley:


#5

OK!

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:

  1. 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)
  2. incentive to continue reading
  3. 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.


#6

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.