Create Netflix-Style Horizontal Scrolling Cards with GenerateBlocks in Minutes!

[@BohoPsychedelic]

My brother, you have saved my bacon yet again! I can't thank you enough for your remarkable tutorials for GP and GB. Thank you!

[@rajnishkaushik8507]

Thank you, Bro. I was searching this for the last 5 months, and every youtuber was just talking about carasoul and auto sliders. But I wanted without auto slider, and today I came on your channel and I found this thing. You don't know how much I am happy because I have been searching for things continuously for the last 5 months. Thank you so much, Bro.🙏❤️

[@WPTuts]

Nice work dude. :)

[@TheAdminBar]

Thanks, Paul! ❤

[@bennyowusuboama]

Thanks very much for this nice inspiration. I was trying to figure out how to make post query loops scroll horizontally. Any idea ?

[@stanlamontagne5625]

Have you managed to do that with the post querry loop ?

[@twmcmahan]

Suggestions on UX on desktop? I don't think most people will figure out how to use their scroll wheel to use the thing, or the scrollbar.

[@TheAdminBar]

In this example, it does not horizontal scroll on desktop (because it all fits). However, when you use this technique, you will get a scrollbar on desktop, which should make it pretty obvious (unfortunately, also pretty ugly unless you style up the scrollbar with CSS)

[@Web-Design-Technik]

@@TheAdminBar To customize the design of the scrollbar in the desktop view, add CSS with: "scrollbar-color: black white; scrollbar-width: thin;" or similar. Then it already looks a bit better. I'll try it with this.

[@mynameisnotimportant7336]

Great video. How would you alter the grid (which is automatically inserted by GB when using the query loop) to scroll horizontally?

[@mustafaozarslan8448]

Can you please make a video also for elementor please!!

[@heygaurav]

Your videos are amazing! Keep up the great work! Thank you so much for these unique problem solving videos...❤ You saved my hours.

[@upstatenyrider8413]

AWESOME!!! - Thanks for pointing me back to this video after I commented on your New Fav Layout video - I'd watched it before and didn't grasp the full impact the solution could have. I already have a couple layouts this will work nicely with - going to work on this approach with tabs tomorrow. I have an epic desktop layout that I want to make responsive, and this is likely the answer with some a couple twists to the solution. This also demonstrates a great use of flexbox configs.

[@TheAdminBar]

Glad it was helpful!!! I hope it works out well!

[@alone5743]

This a great video man. We want Snap-scrolling like Tripadvisor in next video

[@TheAdminBar]

I think you'll need JS for that.

[@LorenzoPuliti]

Hi, thank for this video. What if I would need to create a grid with more than 6 columns? I see that Generate Blocks Grid has a limit of 6 columns...

[@TheAdminBar]

Those are just presets - you can write whatever you want in that field. Make it 10,000 columns if you'd like!

[@hitechmod]

I always learn something new from your content. Thank you, Kyle! 🙏

[@MonterreyRock]

can it be used with query loop?

[@TheAdminBar]

Sure!

[@mindbodypeakperformance]

Any tips on creating auto scrolling for the company logos for an “as featured in”?

[@motivarsity]

Can I use this for a gallery. Using the gallery block un GP and getting "content wider than screen" and " clickable elements too close together" errors under mobile usability in Google Search Console

[@Dan-bg9ui]

Great video! Thank you. The video is missing two important points: 1/ This Netflix-Style Horizontal Scrolling Card should also apply to Desktops. 2/ The CSS style you share, if inserted into style.css, must have !important added to each line, or it won't work.

[@PilatesinSacramento]

We’ll done! I would not have thought that could be done with just a couple of lines of CSS. Super handy. I’m gonna give that a try! 🙏

[@TheAdminBar]

It's simple! Glad you enjoyed!

[@eliasromero8226]

Do you know how to create a slider with generate blocks?

[@Simulacra001]

Another great tutorial. Quick question though, any idea why the CSS works when written in the customiser but not when added to my child themes style.css file? The odd part is, all other CSS in there is working just fine...

[@christineweeks7046]

Great content Kyle! Great way to replicate/replace a carousel within the lightweight GB framework.

[@TheAdminBar]

Thanks, Christine! ❤ Glad you enjoyed!

[@SoufianeBenali-t9j]

This is yet another amazing video Kyle, thank you! I would like to also add pointers or arrows on the right side, to show it even more clearly to visitors that it's possible to scroll. Do you have any way to add it?

[@TheAdminBar]

Possible, but you'll need to add Javascript to the mix for that.

[@FaroukNasri]

Since today, my scroll not working anymore. What happened ? An update ?

[@TheAdminBar]

Hummm nothing with GP or GB. Hard to say!

[@FaroukNasri]

I have tested on mobile : it works. But on desktop, your tutorial not works : the drag and drop not works, nothing happened when I try to move the slider with my mouse@@TheAdminBar

[@FaroukNasri]

The drag works on the Chrome inspector, when I activate the "mobile/responsive" view@@TheAdminBar . But not functional when I let desktop. Does it significate that it will be 100% functional on production ?

[@officialjsam]

Can this be achieved wirh elementor???

[@JuanmaFortes]

Hi! Awesome tutorial, I am applying it to a clients website but I am facing some issues. - The shadow of my 1st and last card gets trimmed. - The moment i set the grid containers to relative and follow the tutorial, I get an extra lateral scroll in mobile of around 10px in all the page, and i dont know why. - I also followed your tutorial on using data-attributes to make badges, and part of the badge (50% actually) is also trimmed because that part is outside the card. Tried playing with the z-indexes but no luck :( Also, there is something I tried to change from your tutorial. On mobile, I dont like having a padding on the right when you see the section (can see it at 6:32), as it can make it less obvious that there is a lateral scroll. My approach was to set section container right-padding to 0 on mobile, and give the last card, a margin-right of 20px to make it obvious when you reach the end. Thanks a lot for your tutorials, Im trying not to rely on plugins as much as I can, and being able to to this with just 2 lines of css is crazy.

[@kevinmccourt3077]

Another fantastic video, but what about the horizontal spacing to the left, It's fine onload, but as soon as you start scrolling it extends out. I see changing the grid gap helps but is there anything that will fix this? I've added extra left margin to the container, but then it doesn't look right when loading.

[@flyingff6939]

How to add a product link in this ?

[@moodyadel4725]

That's Amazing Video Kyle , THANK YOUUUUUUU!

[@TheAdminBar]

Glad you enjoyed it!

[@angelhernandezbiz]

Would it be possible to do something similar on the computer screen? Like a Testimonials container. Thank you very much for your content, it's always great!

[@angelhernandezbiz]

Please, I can't find anything similar! Can you help me?

[@lasvegascustomprinting]

What plug in’s are you using?

[@TheAdminBar]

For this tutorial it's GeneratePress Premium and GenreateBlocks Pro

[@7sport957]

Great tutorial. I already tried it, but for some reason my scrolling starts with second block... any idea why?

[@TheAdminBar]

Hummmm... Could it be the alignment in your flex settings? Like, if it's set to "center" maybe it's starting too far over. I'm not really sure!

[@7sport957]

@@TheAdminBar Yes, you were right... It was the "center" alignment. Now, its working just fine🙏. Thank you very much!

[@gojiyaravi2]

Thanks for thr video Kyle 🤩! You are absolutely killing GenerateBlocks with your Tricks 😂. 02:06 It changed from 24 px to 21 px 😂. I get that issue a lot.

[@TheAdminBar]

Whoops 😅

[@youtubepromo]

Thank you so much Kyle.

[@TheAdminBar]

You're welcome so much!

[@youtubepromo]

@@TheAdminBar Also, if you notice i've added a gradient color for the scroll bar, i've borrowed some stuff from kevin powell.. i intend do more styling as i go...i wish there was a way to turn this into a acf block

[@piratebasscaptain]

Great content, I love your videos like the single post design and your idea there, but this is also amazing! keep rocking please!

[@TheAdminBar]

Thanks so much! Glad to hear you enjoy it!

[@Web-Design-Technik]

Thank you! I can use that well. 🙂

[@darrieno1996]

Incredible vid, thank you

[@nb7kw]

I have replicated your work exactly and have had no luck creating this effect.

[@TheAdminBar]

Hummmm it's so hard to know what's not working right without seeing it. My guess is that it's something tiny (it always is!). Try coming back to it in a day or two with fresh eyes!

[@astrologylife_]

Hello, Would you mind sharing what's the name of Chrome extension that you clicked for responsive dimensions on different devices?

[@TheAdminBar]

I think you might just be talking about the "inspector", which is just built into Chrome.

[@astrologylife_]

@@TheAdminBar Thank you for your response!

[@scottpeters1847]

Doesn't work at all for me, I've watched 30 times to make sure I didn't miss anything, I even made a new page and copied exactly what you did, the scroll bar appears, but everything is still as it was before - what theme are you using? Edit - turns out it was the theme I was using preventing this from working

[@bradfranklin-j66co]

Nice! Great tip. Just just inspired me.

[@TheAdminBar]

Awesome! Can't wait to see what you make!

[@JupitersLuck]

Outstanding stuff!

[@TheAdminBar]

Glad you enjoyed it!

[@PabloWebscobar]

Hey I have been trying this on elementor but can't get it to work have watched the video 100 times but just can't get it, do I need to do anything different when using elementor? Any help would be much appreciated.

[@TheAdminBar]

Yeah, it's tricky in Elementor because they nest so many things in extra divs. If I remember right, when you add a class to a headline it actually nests the headline in 2 divs and putts the class on one of the divs 😅 This makes it VERY hard to target things. My guess is you'd have to fiddle around with the selectors trying to find what the right one is.

[@PabloWebscobar]

@@TheAdminBar thanks very much for the help that made a big difference

[@sumanghorui5502]

Thank you. it's really helpful.

[@TheAdminBar]

Glad you found it useful!

[@webgeneral]

I love the content on your channel, and I'm not even using GP and GB... I'm building my sites with Kadence, but still very helpful and inforamtive! Thank you

[@TheAdminBar]

I bet a lot of it translates! Thank you!

[@AdityaThakur-ew4qg]

In this, how to put the post using Quarry Loop, can you make a tutorial.

[@TheAdminBar]

Did you see this one? kzbin.info/www/bejne/gZ-sgJl4jqaNbrM

[@eran2510]

Is it responsive? Won't it make the page "content wider than screen" issue?

[@TheAdminBar]

Yes, this is responsive!

[@MrOliver1444]

Great tip

[@TheAdminBar]

Thanks!

[@mubindidit230]

That was super useful!!!

[@TheAdminBar]

Glad to hear it!

[@morizanova]

yeah horizontal layout solution needed for mobile version . Especially with tons of information which most client always insisting to have in page

[@TheAdminBar]

Good to have the option!

[@sprinterfix]

perfect tutorial!

[@TheAdminBar]

Glad you enjoyed it!

[@DavidTech-e9j]

thx bro!

[@rahul.raghu.2023]

It's beautiful, please make tutorial on Most Popular post with GP and GB Thanks

[@TheAdminBar]

Glad you enjoyed! I don't fool with "popular" posts - requires PHP or JS I don't wanna load.

[@rahul.raghu.2023]

@@TheAdminBar Okay cool

[@TeamNnj]

you rocks

[@혜리-w4q]

good