August 10, 2023

Create Horizontal Scroll Cards like Netflix with GenerateBlocks

Play Video

Ever noticed how Netflix makes browsing through movies and shows so smooth with those horizontal scroll cards? It’s like flipping through a digital magazine, and guess what? You can create that same effect on your website using GenerateBlocks. Let’s dive into how you can make your web pages look sleek and user-friendly, just like Netflix, together with The Admin Bar.

Understanding the Need for Horizontal Scroll Cards

On a mobile screen, cards often stack on top of each other, making a tall tower that you have to scroll down forever to see. Horizontal scroll cards lay those cards side by side, allowing users to scroll sideways. Here’s why this approach is appealing:

  • Mobile-Friendly
    No more endless scrolling down.
  • Intuitive
    Users already know how to scroll sideways.
  • Stylish
    It adds a modern touch to your website.

Setting Up Horizontal Scroll Cards with GenerateBlocks

Here’s a more detailed guide to creating horizontal scroll cards using GenerateBlocks:

  1. Start with a Container
    Add a section that will act as a container for your cards.
  2. Create a Headline
    Add a headline for the section, such as “Check out our courses.”
  3. Add a Grid
    Insert a four-column grid with 20 pixels of Gap between the elements.
  4. Style a Single Card
    Style one card with padding, border radius, background, and images. You can also add an image overlay and adjust the opacity.
  5. Add Content to the Card
    Insert a headline (e.g., “Guitar Courses”) and adjust the color, size, and alignment.
  6. Duplicate the Card
    Duplicate the styled card four times and replace the content and images for different courses (e.g., bass, drum, piano).
  7. Adjust for Mobile and Tablet
    Customize the appearance for different devices, ensuring a good look on desktop, tablet, and mobile.
  8. Add Custom CSS for Scrolling
    In the customizer, add the following CSS to enable horizontal scrolling:

    .horizontal-scroll {
      flex-wrap: no-wrap;
      overflow-x: auto;


  9. Adjust the Size of the Boxes
    Change the size of the boxes on tablet and mobile to make it obvious that there’s more content to scroll.
  10. Reduce the Gap Between Cards
    Adjust the gap between cards to make it clear when users have reached the end of the scroll.

By following these steps, you can create a horizontal scroll cards section that looks great on all devices and offers a smooth user experience.

Extending the Technique to Other Layouts

This horizontal scrolling trick isn’t just for cards. You can use it for:

  • Query Loops
    Show your posts with horizontal scrolling.
  • Other Multi-Column Layouts
    Get creative and try it with different content.

Feel free to experiment and find what works best for your site.


Horizontal scroll cards with GenerateBlocks offer a fresh way to present content on your website. Give it a try, and don’t be afraid to add your own touch. Happy designing!

Create Horizontal Scroll Cards like Netflix with GenerateBlocks
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.