Hi there,
I’m having trouble with a moving interaction when there is a mouse click. I have a ‘contact’ button on the right side of my nav bar, which when clicked on moves to the left side of the page and reveals the contact details. However, at the moment the value I have set for it to move only works by my screen size - with a smaller screen size the ‘contact’ moves too far and goes off the edge of the screen. I am wondering if there is a way I can tell it to move to the left edge of the screen no matter what size the screen is.
Make its container the full width of the screen (100% of the body, or 100vw) and then you can have your interaction set up to move 80% for example. It should move across 80% of the page no matter the screen size at that point.
Hi thanks for getting back to me! I am trying to do this, I have the container set to 100%, but for some reason the heading only moves a little bit when I put in 80%. It works when I set the heading width to 100%, but then means that as it moves to the other side of the page, there is lots of white space on the edge - I’ve attached a pic which shows this.
Hey sorry, looks like when using % based values it’s moving 80% of the text width, not its container width.
Try using VW instead. So 80% of the view width for example. That should work better. I tested it though and it goes off screen on mobile with the same value set as desktop. I think this is because it’s making the middle point the middle of the text.
I’d recommend just setting up two different interactions for the different screen sizes using these options in the interactions menu:
Maybe just making the contact button go to 0% opacity rather than moving it to the other side of the screen would be easier
