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 }
@velentdesigns90642 жыл бұрын
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
@Mr_Web3 жыл бұрын
✅ 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 }
@therealsalamiboi2 жыл бұрын
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?
@poojashinde60652 жыл бұрын
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
@practiceandpixels2 жыл бұрын
Didn't work :( . Everything went 90 degrees. Even with the adjusted code to fix it below :(
@nerdypeachmango2 жыл бұрын
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
@aqibr.18872 жыл бұрын
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?
@webinnovator40912 жыл бұрын
This just Amazing I was confused from the last three Days I just Loved this tutorial
@Mr_Web2 жыл бұрын
Happy to hear that!
@timescroll15 ай бұрын
after long time i got solution for scroll column with css thank you so much author❤❤❤❤❤
@yturemax714 Жыл бұрын
Sorry, it doesnt work in my website =(
@litalooshayafa2 жыл бұрын
not working for me:( , i't goes vertical and not horizontal, do you know what may cause this?
@Mr_Web2 жыл бұрын
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
@diankuncoro14002 жыл бұрын
Hi I try the code from beginning, but the result all the section are vertically. Any idea?
@juanmajr102 жыл бұрын
Hi, in case you are still on this, check your class names
@tejasrautmare27452 жыл бұрын
is it possible to loop scroll.. i.e after section 5 we get section 1 again
@user-ge4ze9mj2f Жыл бұрын
When I inspected the page, I couldn't find the elementor section wrap. Can anyone help me to find the problem?
@lisavingerspel2 жыл бұрын
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.
@tripletwinsmedia5 ай бұрын
Am using Divi theme. Is there a way to have this effect on Divi? Thanks
@musicworld577 Жыл бұрын
very easy and simple way of explantion
@eliranhodedi9156 Жыл бұрын
Thanks for the excellent explanation! And if I want to scroll from right to left? What command should I give him?
@user-mh4co5eo3g Жыл бұрын
If I want the end of the scroll to be vertical? Suppose we make a few more areas that go down at the end?
@Florensrt Жыл бұрын
This is for all the sections right? So that means i cant have like other sections because they will be horizontal scrolling aswell?
@barmosseri13537 ай бұрын
After adding the css I can't see the sections, what to do?
@TheBlackDoorOk Жыл бұрын
I wanna do that but whit cards of info. How=? my eternal question
@CyberImpact72 жыл бұрын
not working
@emBELLAtex2 жыл бұрын
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.
@juanmajr102 жыл бұрын
Hi, in case you are still on this, check your class names
@CHAIMLURAN Жыл бұрын
great video can i apply this only on pages or only on sections?
@joelreed5252 жыл бұрын
Fantastic video, super helpful!
@Mr_Web2 жыл бұрын
Great & Thanks 👍
@savtrrsh4 ай бұрын
hello, how to make it looping or never ended?
@jdtrading7385 Жыл бұрын
Working but it does not work on mobile - its on the very bottom of the screen. Looks bad :c
@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.
@sarahrajah64869 ай бұрын
Works on backend not frontend, any idea why
@MrCnettles882 жыл бұрын
i used .elementor in astra and it worked
@Mr_Web2 жыл бұрын
Glad to hear that 👍
@andrekremmer71042 жыл бұрын
Thanks for that. Do you have a solution for the Flex Containers instead of the old Sections? Thanks in Advance
@othosilco2 жыл бұрын
Awesome explanation!
@Mr_Web2 жыл бұрын
Great thanks 👍
@juanmajr102 жыл бұрын
I did and it works but the content goes up with header, any idea on why's that?
@Mr_Web2 жыл бұрын
Check your class names might be different with your theme
@TMB-Solutions2 жыл бұрын
I attempted this and failed. Any help? It appears to turn every div 90* and stack them as normal (Vertically). Scrolling is still vertical.
@rebelinc2 жыл бұрын
Try another theme like Hello or Astra?
@jasminj.72112 жыл бұрын
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_Web2 жыл бұрын
Great! Thanks for sharing
@therealsalamiboi2 жыл бұрын
@@jasminj.7211 This code fixed the page but it did not make horizontal scroll work. Can you offer any advise?
@sofiarodriguez36152 жыл бұрын
@@therealsalamiboi same here
@shivramkrishnan6968 Жыл бұрын
Sir its not working properly any perfect code
@hari5y7162 жыл бұрын
Awesome Tutorial, would love to see the slider as well.
@dreammediafilm2 жыл бұрын
Thanks this helped me alot.
@Mr_Web2 жыл бұрын
Glad it helped
@dreammediafilm2 жыл бұрын
@@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.
@fliegmit2 жыл бұрын
very cool!!!
@NG-xd4df2 жыл бұрын
This is really good tutorial. Is this mobile responsive too?
@highvibee2 жыл бұрын
no
@RubensSampaioDesign2 жыл бұрын
Nice tutorial, but in my website it turns vertical.
@Mr_Web2 жыл бұрын
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
@sofiarodriguez36152 жыл бұрын
@@Mr_Web same here, I am using OceanWP and it's not really working :( class is ok
@emBELLAtex2 жыл бұрын
@@sofiarodriguez3615 I have the same issue. Did you find a solution?
@sofiarodriguez36152 жыл бұрын
@@emBELLAtex no :( till this day, not working at all, sorry
@vincenzoaccomando46142 жыл бұрын
Fantastico!! Funziona!! Ma mi crea una pagina in più, sapete dirmi il perchè?
@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
@matata67572 жыл бұрын
Thanks Sir
@ipAlexx2 жыл бұрын
Hello, Very nice video. How i can me the scroll to be snappy between the sections?
@Mr_Web2 жыл бұрын
Yeah, simply follow the rest of the steps here: bit.ly/2Y9QoLh
@sarahrain43712 жыл бұрын
Followed the whole tutorial it doesn't work. It's rotated 90 degrees
@Mr_Web2 жыл бұрын
Check of the section's class name hasn't changed since recording the video, most likely why it's happening
@renebeier2 жыл бұрын
What theme did you start off with?
@Mr_Web2 жыл бұрын
It's been a while but I think it was Hello theme by Elementor
@Hopreme2 жыл бұрын
Hello, can all the anchors work after this ?
@Mr_Web2 жыл бұрын
Yeah, simply follow the rest of the steps here: bit.ly/2Y9QoLh
@potornainorbert73442 жыл бұрын
Wonderful tutorial! Is it possible to navigate between the section with links in the menu?
@Mr_Web2 жыл бұрын
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?
@fulviaquaglia8852 жыл бұрын
Not working for me
@juanmajr102 жыл бұрын
Hi! how do i do this to only work on pc?
@juanmajr102 жыл бұрын
and somehow, the footer its on the top right, right where the menu is, any idea on whys that?
@AyaxxK3 жыл бұрын
Great! Thanks for the code!
@Mr_Web3 жыл бұрын
Glad to be of help, enjoy 👍
@shammakh442 жыл бұрын
why i feel the microphone is almost your face size !! , but nice video loved the tutorial
@Mr_Web2 жыл бұрын
It's a Rode Procaster they're quite big alright... 😂😂😂