[How-To] CSS-Only Horizontal Scroll for HivePress Grids on Mobile

[ChrisB]

Hey @everyone,

I just wanted to share a cool snippet with the community that I came up with using AI, which cleanly rearranges HivePress grids into horizontal touch/scroll-based rows.

It frees up a ton of page space, slightly adjusts sizes, and leaves enough of a peek of the next block to indicate it’s there.

It’s scoped to mobile and tablet devices, and only on the home page and archive pages, but it may need to be slightly tweaked if it’s too broad upon further testing.

This also means you can enjoy implementing this feature without having to worry about new plugins, or extra .js bloat. It simply works with most modern browsers to help transform Listing, Vendor and Category blocks into fancy little sliders!

(Video below!)

Just visit Appearance > Customize > Additional CSS in the backend of WordPress, copy and paste the following code, and boom! - a huge mobile UX win!

@media (max-width: 1024px) {
  /* Homepage and Archive pages - all grid rows */
  body.home .hp-grid,
  body.home .hp-row,
  
  .tax-hp_listing_category .hp-grid,
  .tax-hp_listing_category .hp-row,
  
  .post-type-archive-hp_listing .hp-grid,
  .post-type-archive-hp_listing .hp-row,
  
  .post-type-archive-hp_vendor .hp-grid,
  .post-type-archive-hp_vendor .hp-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    
    gap: 16px !important; 
    column-gap: 16px !important;
  }

  /* Grid items */
  body.home .hp-grid__cell,
  body.home .hp-grid__item,
  body.home .hp-col-xs-12,
  
  .tax-hp_listing_category .hp-grid__cell,
  .tax-hp_listing_category .hp-grid__item,
  .tax-hp_listing_category .hp-col-xs-12,
  
  .post-type-archive-hp_listing .hp-grid__cell,
  .post-type-archive-hp_listing .hp-grid__item,
  .post-type-archive-hp_listing .hp-col-xs-12,
  
  .post-type-archive-hp_vendor .hp-grid__cell,
  .post-type-archive-hp_vendor .hp-grid__item,
  .post-type-archive-hp_vendor .hp-col-xs-12 {
    display: block !important;
    flex: 0 0 86% !important;
    width: 86% !important;
    max-width: 86% !important;
    min-width: 86% !important;
    
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    
    scroll-snap-align: start !important;
  }

  /* Hide scrollbars */
  body.home .hp-grid::-webkit-scrollbar,
  body.home .hp-row::-webkit-scrollbar,
  .tax-hp_listing_category .hp-grid::-webkit-scrollbar,
  .tax-hp_listing_category .hp-row::-webkit-scrollbar,
  .post-type-archive-hp_listing .hp-grid::-webkit-scrollbar,
  .post-type-archive-hp_listing .hp-row::-webkit-scrollbar,
  .post-type-archive-hp_vendor .hp-grid::-webkit-scrollbar,
  .post-type-archive-hp_vendor .hp-row::-webkit-scrollbar {
    display: none !important;
  }
  
  body.home .hp-grid,
  body.home .hp-row,
  .tax-hp_listing_category .hp-grid,
  .tax-hp_listing_category .hp-row,
  .post-type-archive-hp_listing .hp-grid,
  .post-type-archive-hp_listing .hp-row,
  .post-type-archive-hp_vendor .hp-grid,
  .post-type-archive-hp_vendor .hp-row {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
}

I hope the community finds this useful!

Edit: I updated the snippet to include Tablet devices, too. If you would prefer mobile only, simple change 1024 to 767 near the beginning of the snippet!

Cheers,
Chris

P.S. If this extension saved you time or money, consider buying me a coffee! Sharing these tools for free takes a lot of time and resources, and your support helps me keep doing it for the community. Thank you!

[kseniia]

Hi @ChrisB,

Thanks for sharing! It gives the theme a nice app-like look.

I thought it would be useful to share the result with the community as well:

[ChrisB]

Hey @kseniia,

No worries! And, thanks for sharing the little video.

I’ve another idea to improve this further, but I’ll need your help with a second snippet.

Essentially, what I’d like to do is show a different number of listings on my homepage listing block depending on if you’re viewing via mobile or desktop.

I can achieve this by creating two blocks with varying numbers of listing cards displayed and show/hide them depending on the device being used, but if it’s possible to achieve this with a snippet that would be preferable, so as both sections aren’t rendered twice in the source code.

The HivePress AI suggested:

add_filter(
    'hivepress/v1/templates/home_page/blocks',
    function( $blocks, $template ) {
        // Check if user is on mobile
        $is_mobile = wp_is_mobile();
        
        // Set number of listings based on device
        $listings_count = $is_mobile ? 6 : 12;
        
        return hivepress()->template->merge_blocks(
            $blocks,
            [
                'listings' => [
                    'attributes' => [
                        'per_page' => $listings_count,
                    ],
                ],
            ]
        );
    },
    1000,
    2
);

And, a few similar variants, but sadly, none of the snippets seemed to override the block setting.

Much appreciated if yourself or @Ihor can help put together a working snippet to help achieve this!

Cheers,
Chris

[ihor]

Thanks for sharing!

For the different number of listings on mobile/desktop on the home page, PHP may not work in this case because it’s hard to detect the mobile layout on the back end, but there may be a workaround if you use CSS on the front-end – for example, using a media query on a specific screen width as a threshold and hiding listings starting from the nth one.

Hope this helps

[ChrisB]

No worries, Ihor and thanks for the suggestion - that seems to work perfectly!

Here’s the extra CSS in case anyone else wants to do the same.

1. Update your Home page Listing block’s settings to display the total number allowed anywhere.

2. Visit Appearance > Customise > Additional CSS & paste in either of these snippets:

For Desktop and Tablet:

/* Limit to 6 listings on tablet and desktop */
@media (min-width: 768px) {
  .home .hp-listings .hp-grid__item:nth-child(n+7) {
    display: none !important;
  }

Or, for Desktop only:

/* Limit to 6 listings on desktop */
@media (min-width: 1024px) {
  .home .hp-listings .hp-grid__item:nth-child(n+7) {
    display: none !important;
  }

If you want to adjust the limited number of Listings displayed, simply add 1 to the total desired, and replace 7 in the snippets shared above.

(E.g. for 3 Listings, 7 becomes 4.)

I hope the community finds this useful!

Cheers,
Chris