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 }
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
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?
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?
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?
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
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.
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?
✅ 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 }
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
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
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?
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
Didn't work :( . Everything went 90 degrees. Even with the adjusted code to fix it below :(
This just Amazing
I was confused from the last three Days
I just Loved this tutorial
Happy to hear that!
great video can i apply this only on pages or only on sections?
Sorry, it doesnt work in my website =(
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?
after long time i got solution for scroll column with css thank you so much author❤❤❤❤❤
Thanks for the excellent explanation!
And if I want to scroll from right to left?
What command should I give him?
This is for all the sections right? So that means i cant have like other sections because they will be horizontal scrolling aswell?
After adding the css I can't see the sections, what to do?
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
Am using Divi theme. Is there a way to have this effect on Divi? Thanks
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
hello, how to make it looping or never ended?
When I inspected the page, I couldn't find the elementor section wrap. Can anyone help me to find the problem?
If I want the end of the scroll to be vertical? Suppose we make a few more areas that go down at the end?
I wanna do that but whit cards of info. How=? my eternal question
not working
Works on backend not frontend, any idea why
very easy and simple way of explantion
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.
Working but it does not work on mobile - its on the very bottom of the screen. Looks bad :c
Fantastico!! Funziona!! Ma mi crea una pagina in più, sapete dirmi il perchè?
i used .elementor in astra and it worked
Glad to hear that 👍
Thanks for that. Do you have a solution for the Flex Containers instead of the old Sections? Thanks in Advance
Sir its not working properly any perfect code
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.
This is really good tutorial. Is this mobile responsive too?
no
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
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
Fantastic video, super helpful!
Great & Thanks 👍
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
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?
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
Awesome explanation!
Great thanks 👍
Awesome Tutorial, would love to see the slider as well.
Does this work with the new Elementor flex container system?
I don't think so since all the CSS classes are different
Not working for me
What theme did you start off with?
It's been a while but I think it was Hello theme by Elementor
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
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
Hello, can all the anchors work after this ?
Yeah, simply follow the rest of the steps here: bit.ly/2Y9QoLh
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?
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... 😂😂😂
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.
very cool!!!
Thanks Sir
sorry it is not worked
Great! Thanks for the code!
Glad to be of help, enjoy 👍
✅ 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
}
Nice video
Thanks
Good
Thanks Sagar 🤗