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 }
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?
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
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?
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
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?
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
@@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?
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?
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.
✅ 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 }
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". 😔
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
}
again the whole content rotates 90 degree. What should I do now
Perfect thanks
t'es une masterclass. Love you from France
Thank you so much. It helped me a lot
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?
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
Didn't work :( . Everything went 90 degrees. Even with the adjusted code to fix it below :(
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?
looking for same
Sorry, it doesnt work in my website =(
great video can i apply this only on pages or only on sections?
is it possible to loop scroll.. i.e after section 5 we get section 1 again
not working for me:( , i't goes vertical and not horizontal, do you know what may cause this?
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
not working
Hi I try the code from beginning, but the result all the section are vertically. Any idea?
Hi, in case you are still on this, check your class names
After adding the css I can't see the sections, what to do?
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?
hello, how to make it looping or never ended?
Works on backend not frontend, any idea why
This just Amazing
I was confused from the last three Days
I just Loved this tutorial
Happy to hear that!
Am using Divi theme. Is there a way to have this effect on Divi? Thanks
Thanks for the excellent explanation!
And if I want to scroll from right to left?
What command should I give him?
When I inspected the page, I couldn't find the elementor section wrap. Can anyone help me to find the problem?
I wanna do that but whit cards of info. How=? my eternal question
after long time i got solution for scroll column with css thank you so much author❤❤❤❤❤
If I want the end of the scroll to be vertical? Suppose we make a few more areas that go down at the end?
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.
Sir its not working properly any perfect code
Thanks for that. Do you have a solution for the Flex Containers instead of the old Sections? Thanks in Advance
Fantastico!! Funziona!! Ma mi crea una pagina in più, sapete dirmi il perchè?
This is for all the sections right? So that means i cant have like other sections because they will be horizontal scrolling aswell?
Working but it does not work on mobile - its on the very bottom of the screen. Looks bad :c
Hello, can all the anchors work after this ?
Yeah, simply follow the rest of the steps here: bit.ly/2Y9QoLh
very easy and simple way of explantion
Nice tutorial, but in my website it turns vertical.
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
@@Mr_Web same here, I am using OceanWP and it's not really working :( class is ok
@@sofiarodriguez3615 I have the same issue. Did you find a solution?
@@emBELLAtex no :( till this day, not working at all, sorry
What theme did you start off with?
It's been a while but I think it was Hello theme by Elementor
Not working for me
I did and it works but the content goes up with header, any idea on why's that?
Check your class names might be different with your theme
Wonderful tutorial! Is it possible to navigate between the section with links in the menu?
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
@@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?
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?
I'm experiencing the same thing! Did you find a solution? Thank you.
Hello, Very nice video. How i can me the scroll to be snappy between the sections?
Yeah, simply follow the rest of the steps here: bit.ly/2Y9QoLh
Does this work with the new Elementor flex container system?
I don't think so since all the CSS classes are different
Awesome explanation!
Great thanks 👍
Fantastic video, super helpful!
Great & Thanks 👍
i used .elementor in astra and it worked
Glad to hear that 👍
Hi! how do i do this to only work on pc?
and somehow, the footer its on the top right, right where the menu is, any idea on whys that?
This is really good tutorial. Is this mobile responsive too?
no
I attempted this and failed. Any help? It appears to turn every div 90* and stack them as normal (Vertically). Scrolling is still vertical.
Try another theme like Hello or Astra?
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
}
Great! Thanks for sharing
@@jasminj.7211 This code fixed the page but it did not make horizontal scroll work. Can you offer any advise?
@@therealsalamiboi same here
Followed the whole tutorial it doesn't work. It's rotated 90 degrees
Check of the section's class name hasn't changed since recording the video, most likely why it's happening
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.
Hi, in case you are still on this, check your class names
Awesome Tutorial, would love to see the slider as well.
Thanks this helped me alot.
Glad it helped
@@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.
✅ 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
}
why i feel the microphone is almost your face size !! , but nice video loved the tutorial
It's a Rode Procaster they're quite big alright... 😂😂😂
Great! Thanks for the code!
Glad to be of help, enjoy 👍
very cool!!!
Thanks Sir
sorry it is not worked
Nice video
Thanks
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". 😔
Good
Thanks Sagar 🤗