Replicate Tesla’s Homepage Design with 11 Lines of CSS Code
By Clifford P
Tesla’s website is sleek and simple and works well on mobile and desktop.
In building client websites, we’ve had it referenced multiple times. One of the smoothest features is that each section is full height and snaps to scroll so the full height size lines up with the viewport frame.
Here’s a 14 second silent demo:
That’s the neat functionality we’ll get today with 11 lines of CSS (not counting the comments and the unused media query section for a site where GeneratePress’ main menu hides on mobile scroll):
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Now all we need to do is add the .scroll-snap class to each container block we want to adhere to our scroll snapping. I tested this code on both GenerateBlocks‘ Container block and Stackable’s Container block when using the GeneratePress Theme. (Affiliate links here but this code works with the free versions of all 3 of these and likely any other Gutenberg block of your choosing.)
Although this CSS has full-height sections in mind (hence not including 100vh within the CSS itself and instead using the block’s settings), you could use it with any height section.
If you want the full height sections like Tesla’s site, just set that option within your container block:
Stackable’s Container Block’s height settings
How to set GenerateBlocks’s container block as full height
Replicate Tesla’s Homepage Design with 11 Lines of CSS Code
Tesla’s website is sleek and simple and works well on mobile and desktop.
In building client websites, we’ve had it referenced multiple times. One of the smoothest features is that each section is full height and snaps to scroll so the full height size lines up with the viewport frame.
Here’s a 14 second silent demo:
That’s the neat functionality we’ll get today with 11 lines of CSS (not counting the comments and the unused media query section for a site where GeneratePress’ main menu hides on mobile scroll):
Now all we need to do is add the
.scroll-snapclass to each container block we want to adhere to our scroll snapping. I tested this code on both GenerateBlocks‘ Container block and Stackable’s Container block when using the GeneratePress Theme. (Affiliate links here but this code works with the free versions of all 3 of these and likely any other Gutenberg block of your choosing.)Although this CSS has full-height sections in mind (hence not including
100vhwithin the CSS itself and instead using the block’s settings), you could use it with any height section.If you want the full height sections like Tesla’s site, just set that option within your container block:
Additional references: