Trusted Business Software and Services Since 2010 Trusted Business Software and Services Since 2010
  • Resources
    • Fastest WordPress Hosting
    • WordPress Tips
    • WordPress Plugin Boilerplate
    • Zoho Partner
    • Digital Business Cards
  • Portfolio
  • Contact Us
    • Marketing Spend Calculator
  • Free Online Small
    Business Marketing Report
  • Blog
  • Join Cliff’s Email List

Replicate Tesla’s Homepage Design with 11 Lines of CSS Code

By Clifford P on June 13, 2021

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:

Stackable’s Container Block’s height settings
How to set GenerateBlocks’s container block as full height

Additional references:

  • All major browsers support this CSS code
  • CSS Tricks has many helpful demos, as this code is just for vertical scroll snapping
Posted in Advice/Tips/How-To, Web.
Previous5 Steps to Scrape a Website via Google Sheets without Custom Scripts Code
NextHow to disable Divi’s Project post type
  • For your review: our Policies and Contact Information

    Copyright © 2010–2023 · Log in

    Made with by Clifford Paulick

  • Trustworthy, Long-Term Software and Business Services Since 2010
  • Free Online Small Business Marketing Report
  • Resources
    • WordPress Tips
    • WordPress Plugin Boilerplate
    • Zoho Partner
    • Digital Business Cards
  • Contact Us
    • Marketing Spend Calculator
  • Blog
  • Join Cliff’s Email List
  • Resources
    • Fastest WordPress Hosting
    • WordPress Tips
    • WordPress Plugin Boilerplate
    • Zoho Partner
    • Digital Business Cards
  • Portfolio
  • Contact Us
    • Marketing Spend Calculator
  • Free Online Small
    Business Marketing Report
  • Blog
  • Join Cliff’s Email List