Elementor FREE Horizontal Scrolling | NO plugins (CSS ONLY)

[@romanpalli8200]

For everyone who's content rotates 90 degrees and scrolls vertically. Check the name of the main wrapper element. In my case it was page-content and I needed to adjust the code the following: .page-content { width: 100vh; height: 100vw; overflow-x: hidden; overflow-y: scroll; transform: rotate(-90deg) translateX(-100vh); transform-origin: top left; position: absolute; scrollbar-width: none; -ms-overflow-style: none; } .elementor-section-wrap{ transform: rotate(90deg) translateY(-100vh); transform-origin: top left; display:flex; flex-direction: row; width: 600vw; } .section{ width:100vw; height:10vh} ::-webkit-scrollbar{ display:none }

[@velentdesigns9064]

again the whole content rotates 90 degree. What should I do now

[@DB-ef8wt]

Perfect thanks

[@renardmoustache]

t'es une masterclass. Love you from France

[@musicworld577]

Thank you so much. It helped me a lot

[@poojashinde6065]

It works......we just need to give the class name properly in my case it was not working first but then when I inspected my page and found out the exact name of my class and used it.........and then horizontal scrolling worked..............Thank you

[@nerdypeachmango]

A great workaround for those with Free versions only! I was curious, is this possible to apply to a section only? For instance if you wanted a section to be able to scroll horizontally on mobile view only, how would this work?

[@lifegoeson3077]

looking for same

[@therealsalamiboi]

This isn't working at all for me. It turns the whole webpage 90 degrees, even the header. And the horizontal scroll doesn't work. Can anyone help with this?

[@practiceandpixels]

Didn't work :( . Everything went 90 degrees. Even with the adjusted code to fix it below :(

[@webinnovator4091]

This just Amazing I was confused from the last three Days I just Loved this tutorial

[@Mr_Web]

Happy to hear that!

[@CHAIMLURAN]

great video can i apply this only on pages or only on sections?

[@timescroll1]

after long time i got solution for scroll column with css thank you so much author❤❤❤❤❤

[@yturemax714]

Sorry, it doesnt work in my website =(

[@joelreed525]

Fantastic video, super helpful!

[@Mr_Web]

Great & Thanks 👍

[@musicworld577]

very easy and simple way of explantion

[@diankuncoro1400]

Hi I try the code from beginning, but the result all the section are vertically. Any idea?

[@juanmajr10]

Hi, in case you are still on this, check your class names

[@othosilco]

Awesome explanation!

[@Mr_Web]

Great thanks 👍

[@litalooshayafa]

not working for me:( , i't goes vertical and not horizontal, do you know what may cause this?

[@Mr_Web]

Happened to me as well with the original code that I found. Then I replaced the div class with .entry-content and .elementor-section-wrap make sure your DIV are not named differently

[@dreammediafilm]

Thanks this helped me alot.

[@Mr_Web]

Glad it helped

[@dreammediafilm]

@@Mr_Web what would I need to do to make it work for mobile? As soon as you switch ro phone size then the background images won't fill the screen.

[@eliranhodedi9156]

Thanks for the excellent explanation! And if I want to scroll from right to left? What command should I give him?

[@CyberImpact7]

not working

[@Florensrt]

This is for all the sections right? So that means i cant have like other sections because they will be horizontal scrolling aswell?

[@tejasrautmare2745]

is it possible to loop scroll.. i.e after section 5 we get section 1 again

[@Hopreme]

Hello, can all the anchors work after this ?

[@Mr_Web]

Yeah, simply follow the rest of the steps here: bit.ly/2Y9QoLh

[@barmosseri1353]

After adding the css I can't see the sections, what to do?

[@RubensSampaioDesign]

Nice tutorial, but in my website it turns vertical.

[@Mr_Web]

Check that the class names are the same as used in the CSS script. If you're using a different theme might be a little bit different

[@sofiarodriguez3615]

@@Mr_Web same here, I am using OceanWP and it's not really working :( class is ok

[@emBELLAtex]

@@sofiarodriguez3615 I have the same issue. Did you find a solution?

[@sofiarodriguez3615]

@@emBELLAtex no :( till this day, not working at all, sorry

[@NG-xd4df]

This is really good tutorial. Is this mobile responsive too?

[@highvibee]

no

[@MrCnettles88]

i used .elementor in astra and it worked

[@Mr_Web]

Glad to hear that 👍

[@ipAlexx]

Hello, Very nice video. How i can me the scroll to be snappy between the sections?

[@Mr_Web]

Yeah, simply follow the rest of the steps here: bit.ly/2Y9QoLh

[@רבקישאולזון]

If I want the end of the scroll to be vertical? Suppose we make a few more areas that go down at the end?

[@tripletwinsmedia]

Am using Divi theme. Is there a way to have this effect on Divi? Thanks

[@savtrrsh]

hello, how to make it looping or never ended?

[@vincenzoaccomando4614]

Fantastico!! Funziona!! Ma mi crea una pagina in più, sapete dirmi il perchè?

[@potornainorbert7344]

Wonderful tutorial! Is it possible to navigate between the section with links in the menu?

[@Mr_Web]

Yes follow the rest of the instructions on that page you'll also be able to set anchors to link your menu items directly to each section: bit.ly/2Y9QoLh

[@AnnitaCaniglia]

@@Mr_Web Hey Mr. Web, I tried following the instructions in the link, but the automatic scroll will just not work. It works only if I open in a new page. Any tips?

[@TheBlackDoorOk]

I wanna do that but whit cards of info. How=? my eternal question

[@sarahrajah6486]

Works on backend not frontend, any idea why

[@hari5y716]

Awesome Tutorial, would love to see the slider as well.

[@aqibr.1887]

How can I make a section that is horizontally drag-scrollable? I want to create a website with a section of multiple icon boxes that can be scrolled horizontally by dragging them. Do you know how to do that?

[@renebeier]

What theme did you start off with?

[@Mr_Web]

It's been a while but I think it was Hello theme by Elementor

[@TMB-Solutions]

I attempted this and failed. Any help? It appears to turn every div 90* and stack them as normal (Vertically). Scrolling is still vertical.

[@rebelinc]

Try another theme like Hello or Astra?

[@jasminj.7211]

I changed the transform rotate degrees and now it works (see below) .entry-content.clear { width: 100vh; height: 100vw; overflow-x: hidden; overflow-y: scroll; transform: rotate(90 deg) translateX(-100vh); transform-origin: top left; position: absolute; scrollbar-width: none; -ms-overflow-style: none; } .elementor-section-wrap{ transform: rotate(-90 deg) translateY(-100vh); transform-origin: top left; display:flex; flex-direction: row; width: 600vw; } .section{ width:100vw; height:10vh} ::-webkit-scrollbar{ display:none }

[@Mr_Web]

Great! Thanks for sharing

[@therealsalamiboi]

@@jasminj.7211 This code fixed the page but it did not make horizontal scroll work. Can you offer any advise?

[@sofiarodriguez3615]

@@therealsalamiboi same here

[@PratigyaRana-o1s]

When I inspected the page, I couldn't find the elementor section wrap. Can anyone help me to find the problem?

[@shivramkrishnan6968]

Sir its not working properly any perfect code

[@jdtrading7385]

Working but it does not work on mobile - its on the very bottom of the screen. Looks bad :c

[@lisavingerspel]

Has anyone tried to add the anchorlinks / links to jump to a specific horizontal section? The code in the link provided doesn't work for me.

[@juanmajr10]

I did and it works but the content goes up with header, any idea on why's that?

[@Mr_Web]

Check your class names might be different with your theme

[@aitordotco]

Does this work with the new Elementor flex container system?

[@Mr_Web]

I don't think so since all the CSS classes are different

[@sarahrain4371]

Followed the whole tutorial it doesn't work. It's rotated 90 degrees

[@Mr_Web]

Check of the section's class name hasn't changed since recording the video, most likely why it's happening

[@paulobraga1538]

Works perfectly on the editor, but when I see the real page, every section rotates 90 degrees. I'm using Astra and checked the classes names. Does anyone knows how to fix it?

[@axellebaudlot3133]

I'm experiencing the same thing! Did you find a solution? Thank you.

[@emBELLAtex]

Hi, I am using the free theme OceanWP with free Elementor. I tried the original CSS code and the one suggested by Roman Palli, both rotated the page 90 degrees and still scrolled vertically. Does anyone have a solution that worked for them besides the two CSS codes listed? Any help would be appreciated. Thanks in advance.

[@juanmajr10]

Hi, in case you are still on this, check your class names

[@realMentorX]

Thanks for that. Do you have a solution for the Flex Containers instead of the old Sections? Thanks in Advance

[@juanmajr10]

Hi! how do i do this to only work on pc?

[@juanmajr10]

and somehow, the footer its on the top right, right where the menu is, any idea on whys that?

[@fulviaquaglia885]

Not working for me

[@matata6757]

Thanks Sir

[@AyaxxK]

Great! Thanks for the code!

[@Mr_Web]

Glad to be of help, enjoy 👍

[@fliegmit]

very cool!!!

[@shammakh44]

why i feel the microphone is almost your face size !! , but nice video loved the tutorial

[@Mr_Web]

It's a Rode Procaster they're quite big alright... 😂😂😂

[@ponpeshamidiyah]

sorry it is not worked

[@thelegendarymasterofnothing]

Hm.. But Ele..something is a plugin. It just carries another name. If you do this for a living - or maybe are *really* into CMSes, cosplay as a zip file, whatever - you must know that when people use keywords like "no plugins" and similar, they really mean "no third party add-ons". 😔

[@avondklok1618]

Nice video

[@Mr_Web]

Thanks

[@bglobaladworld4695]

Good

[@Mr_Web]

Thanks Sagar 🤗

[@Mr_Web]

✅ CSS Code : Credit to coderoad.ru where I found this code. If you follow the rest of the instructions on that page you'll also be able to set anchors to link your menu items directly to each section: bit.ly/2Y9QoLh .entry-content.clear { width: 100vh; height: 100vw; overflow-x: hidden; overflow-y: scroll; transform: rotate(-90deg) translateX(-100vh); transform-origin: top left; position: absolute; scrollbar-width: none; -ms-overflow-style: none; } .elementor-section-wrap{ transform: rotate(90deg) translateY(-100vh); transform-origin: top left; display:flex; flex-direction: row; width: 600vw; } .section{ width:100vw; height:10vh} ::-webkit-scrollbar{ display:none }