Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Expand line code to fit either side of the viewport



Site URL: https://endive-denim-89ds.squarespace.com/

Hi all!

I am trying to create a title effect with a line animation that comes from either the left or the right side of the viewport. I thought I successfully made it work, but when my colleagues watch the website on their large screen (2560x1440) the lines stop before reaching the side of the viewport. 

Here is the markdown block I've made for the left lines:

<div style="text-align: right">We produce a new standard<br>of 3D films and images
<hr style="height:2px !important;  margin-left: -400px !important; width: auto !important; background-color: #000000 !important; margin-top: -30px;">

Here is the markdown block I've made for the right lines:

Implementing/Performing into<br>the luxury driven culture
<hr style="height:2px !important; width: 126.5% !important; background-color: #000000 !important; margin-top: -30px;">


Also, it seems like there is unnecessary margin on the right side of each page (this only shows when you scroll to the side). Is that normal?

Thank you for your help!!

Edited by remia06
Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0

Hi Tuanphan!

I would not like the black line to be full width, I would just like to stick it to the left or the right side of the viewport (and yes, we're talking about the black lines under "We produce..." and "Performing into..." etc) The code I've used for the width of the black line is width: 126.5% or width: auto (depending on which side the black line goes). It does look OK right watching it on a 15.4 inches screen, but I can see that it stops on any screen bigger before it reaches the side of the screen. Does that make sense?

But the thing that bugs me more is when you slide any page to the left, it shows an empty margin to the right... See attached. I have no idea why, do you?

thank you! 🙏 

Screenshot 2020-10-26 at 10.18.39.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...