Archived topic
Scroll box not working after installing UNO theme
5 replies · Started by Kevin on October 26, 2021
Dear support,
I have checked the preliminary details but still get disable the mobile scrolling effect in UNO I wanted to keep.
Here is a screenshot of what I get. It seems like the class scroll-box does not provide the desired effect.
I am on firefox. Is there a dependency in the browser choice?
For the search of topics, would it be possible to split issues per Theme selected? I was unable to find relevant issues with that theme. 3816 posts is too much.
Thanks for any help on this.
Kevin
Hi there,
i assume you will be updating the image to your own - if you can follow the steps providing in the original site see here beside that element:
Once you got your image in place if its still an issue, share a link to the site and i can take a look.
Hi David,
Yes I followed the instruction. I did not even touch anything when installing the theme and already it was not working even after changing an image. By looking at the code structure, the css and html code is totally different, maybe that's the reason why.
The site is under construction and not online but I can enclose the code of css that is used by default:
/* GeneratePress Site CSS */ /*--- Elementor CSS Styles ---*/
/* Adjust button shadow and float animation */
.no-hover-shadow .elementor-button:not(:hover) {
box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0) !important;
}
.elementor-animation-float:active,
.elementor-animation-float:focus,
.elementor-animation-float:hover {
transform: translateY(-4px);
}
/* Create fake mobile scroll box */
.scroll-box .elementor-column-wrap {
overflow: hidden;
max-width: 50%;
margin: auto;
position: relative;
box-shadow: inset 0 5px 10px 2px rgba(255, 255, 255, 0.3), 0 10px 15px -5px rgba(0, 0, 0, 0.5);
;
}
.scroll-box .elementor-widget-container {
position: relative;
border-radius: 30px;
overflow: auto;
padding-bottom: 216%;
}
.scroll-box .elementor-image {
height: 0;
}
.scroll-box .elementor-image img {
width: 100%;
}
.scroll-box .elementor-column-wrap:after {
content: '';
position: absolute;
top: 2.5%;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 2.5%;
background-color: rgb(58, 58, 58);
border-radius: 0 0 10px 10px;
}
/* Create Perspective classes */
@media (min-width: 769px) {
.left-perspective,
.right-perspective {
perspective: 1000px;
}
body:not(.customize-partial-edit-shortcuts-shown):not(.elementor-editor-active) .left-perspective>.elementor-column-wrap {
-webkit-transform: perspective(1000px) rotateY(15deg);
transform: perspective(1000px) rotateY(15deg);
-webkit-transition: -webkit-transform 0.3s ease-in;
transition: -webkit-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
z-index: 1;
}
body:not(.customize-partial-edit-shortcuts-shown):not(.elementor-editor-active) .right-perspective>.elementor-column-wrap {
-webkit-transform: perspective(1000px) rotateY(-15deg);
transform: perspective(1000px) rotateY(-15deg);
-webkit-transition: -webkit-transform 0.3s ease-in;
transition: -webkit-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in,
-webkit-transform 0.3s ease-in;
z-index: 1;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
body:not(.customize-partial-edit-shortcuts-shown):not(.elementor-editor-active) .left-perspective:hover>.elementor-column-wrap {
-webkit-transform: perspective(1000px) rotateY(0);
transform: perspective(1000px) rotateY(0);
}
body:not(.customize-partial-edit-shortcuts-shown):not(.elementor-editor-active) .right-perspective:hover>.elementor-column-wrap {
-webkit-transform: perspective(1000px) rotateY(0);
transform: perspective(1000px) rotateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 50%, 0)
}
to {
opacity: 1;
transform: none
}
} /* End GeneratePress Site CSS */aah - leter versions of Elementor changed the markup ... wonder how many users had to rewrite their custom CSS.
If you can remove the Customizer CSS - and replace it with:
/* GeneratePress Site CSS */ /*--- Elementor CSS Styles ---*/
/* Adjust button shadow and float animation */
.no-hover-shadow .elementor-button:not(:hover) {
box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0) !important;
}
.elementor-animation-float:active,
.elementor-animation-float:focus,
.elementor-animation-float:hover {
transform: translateY(-4px);
}
/* Create fake mobile scroll box */
.scroll-box > .elementor-widget-wrap {
overflow: hidden;
max-width: 50%;
margin: auto;
position: relative;
box-shadow: inset 0 5px 10px 2px rgba(255, 255, 255, 0.3), 0 10px 15px -5px rgba(0, 0, 0, 0.5);
}
.scroll-box .elementor-widget-image {
position: relative;
border-radius: 30px;
overflow: auto;
padding-bottom: 216%;
}
.scroll-box .elementor-widget-image .elementor-widget-container {
height: 0;
}
.scroll-box .elementor-widget-image .elementor-widget-container img {
width: 100%;
}
.scroll-box > .elementor-widget-wrap:after {
content: '';
position: absolute;
top: 2.5%;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 2.5%;
background-color: rgb(58, 58, 58);
border-radius: 0 0 10px 10px;
}
/* Create Perspective classes */
@media (min-width: 769px) {
.left-perspective,
.right-perspective {
perspective: 1000px;
}
body:not(.customize-partial-edit-shortcuts-shown):not(.elementor-editor-active) .left-perspective>.elementor-widget-wrap {
-webkit-transform: perspective(1000px) rotateY(15deg);
transform: perspective(1000px) rotateY(15deg);
-webkit-transition: -webkit-transform 0.3s ease-in;
transition: -webkit-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
z-index: 1;
}
body:not(.customize-partial-edit-shortcuts-shown):not(.elementor-editor-active) .right-perspective>.elementor-widget-wrap {
-webkit-transform: perspective(1000px) rotateY(-15deg);
transform: perspective(1000px) rotateY(-15deg);
-webkit-transition: -webkit-transform 0.3s ease-in;
transition: -webkit-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in,
-webkit-transform 0.3s ease-in;
z-index: 1;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
body:not(.customize-partial-edit-shortcuts-shown):not(.elementor-editor-active) .left-perspective:hover>.elementor-widget-wrap {
-webkit-transform: perspective(1000px) rotateY(0);
transform: perspective(1000px) rotateY(0);
}
body:not(.customize-partial-edit-shortcuts-shown):not(.elementor-editor-active) .right-perspective:hover>.elementor-widget-wrap {
-webkit-transform: perspective(1000px) rotateY(0);
transform: perspective(1000px) rotateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 50%, 0)
}
to {
opacity: 1;
transform: none
}
} /* End GeneratePress Site CSS */Dear David, thank you very much! 5*
Please spread the word on the BUYER site itself. It's really an important bug to correct. Or update quickly your theme pack. I know it is annoying to adapt all due to elementor change but that's part of your job.
Thanks for the support. Much appreciated and good luck!
Kevin
We'll push an update to that site asap.
Glad to hear that worked.
