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

	/* Reference: https://tourkick.com/?p=14005 */
	html, body {
	scroll-snap-type: y proximity;
	}
	@media (max-width: 1024px) {
	html, body {
	scroll-padding: 64px; /* Remove this if your mobile header nav hides upon scroll. */
	}
	}
	@media (min-width: 1025px) {
	html, body {
	scroll-padding: 80px; /* If your desktop header nav is fixed. */
	}
	}
	.scroll-snap { /* Add this class to your container's block settings. */
	scroll-snap-align: start;
	}

view raw style.css hosted with ❤ by GitHub

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:

Additional references:

• All major browsers support this CSS code
• CSS Tricks has many helpful demos, as this code is just for vertical scroll snapping