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.🙏❤️
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.
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.
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)
@@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.
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.
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!
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?
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
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...
@@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
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
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 ?
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
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.
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.
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.
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.
![Megan Thee Stallion - Neva Play (feat. RM) [Official Video]](http://i.ytimg.com/vi/TpYTyAaTRts/mqdefault.jpg)
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!
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.🙏❤️
This a great video man. We want Snap-scrolling like Tripadvisor in next video
I think you'll need JS for that.
Your videos are amazing! Keep up the great work! Thank you so much for these unique problem solving videos...❤ You saved my hours.
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.
Thanks very much for this nice inspiration. I was trying to figure out how to make post query loops scroll horizontally. Any idea ?
Have you managed to do that with the post querry loop ?
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.
Glad it was helpful!!! I hope it works out well!
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! 🙏
It's simple! Glad you enjoyed!
I always learn something new from your content. Thank you, Kyle! 🙏
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.
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)
@@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.
Great video.
How would you alter the grid (which is automatically inserted by GB when using the query loop) to scroll horizontally?
Great content Kyle! Great way to replicate/replace a carousel within the lightweight GB framework.
Thanks, Christine! ❤ Glad you enjoyed!
Nice work dude. :)
Thanks, Paul! ❤
thx bro!
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.
Whoops 😅
I have replicated your work exactly and have had no luck creating this effect.
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!
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?
Possible, but you'll need to add Javascript to the mix for that.
Incredible vid, thank you
That's Amazing Video Kyle , THANK YOUUUUUUU!
Glad you enjoyed it!
Great content, I love your videos like the single post design and your idea there, but this is also amazing! keep rocking please!
Thanks so much! Glad to hear you enjoy it!
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
I bet a lot of it translates! Thank you!
Thank you! I can use that well. 🙂
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...
Thank you so much Kyle.
You're welcome so much!
@@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
Nice! Great tip. Just just inspired me.
Awesome! Can't wait to see what you make!
Thank you. it's really helpful.
Glad you found it useful!
Outstanding stuff!
Glad you enjoyed it!
Can you please make a video also for elementor please!!
yeah horizontal layout solution needed for mobile version . Especially with tons of information which most client always insisting to have in page
Good to have the option!
Any tips on creating auto scrolling for the company logos for an “as featured in”?
Since today, my scroll not working anymore. What happened ? An update ?
Hummm nothing with GP or GB. Hard to say!
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
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 ?
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...
Those are just presets - you can write whatever you want in that field. Make it 10,000 columns if you'd like!
perfect tutorial!
Glad you enjoyed it!
you rocks
Great tip
Thanks!
That was super useful!!!
Glad to hear it!
can it be used with query loop?
Sure!
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
Do you know how to create a slider with generate blocks?
good
It's beautiful, please make tutorial on Most Popular post with GP and GB
Thanks
Glad you enjoyed! I don't fool with "popular" posts - requires PHP or JS I don't wanna load.
@@TheAdminBar Okay cool
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.
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.
Can this be achieved wirh elementor???
How to add a product link in this ?
Great tutorial. I already tried it, but for some reason my scrolling starts with second block... any idea why?
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!
@@TheAdminBar Yes, you were right... It was the "center" alignment. Now, its working just fine🙏. Thank you very much!
Hello,
Would you mind sharing what's the name of Chrome extension that you clicked for responsive dimensions on different devices?
I think you might just be talking about the "inspector", which is just built into Chrome.
@@TheAdminBar Thank you for your response!
What plug in’s are you using?
For this tutorial it's GeneratePress Premium and GenreateBlocks Pro
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.
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.
@@TheAdminBar thanks very much for the help that made a big difference
In this, how to put the post using Quarry Loop, can you make a tutorial.
Did you see this one? th-cam.com/video/KnIOfBYAZ8Q/w-d-xo.html
Is it responsive? Won't it make the page "content wider than screen" issue?
Yes, this is responsive!