-
Posts
-
Hello,
I would like to display only 80% of the fullwidth slider. So I tried the following CSS:
.avia-slideshow-inner {max-height: 80%;}Now there is only 80% of the slider, but there is also a white space under the slider and I have to scroll to the next content.
I would like to display the text direct under the slider.BTW: I wonder how does it work with the CSS class. I tried to add a name to the fullwidth slider css field (name: Slider1)
When I use the CSS: .Slider1 {max-height: 80%;} it doesn’t work.And the last question: Why does it only work in the Design -> customizer -> quick css and not in the general styling -> quick css?
Thanks!
Hey Andreas_BS,
Can you please remove the code, so we can do it properly?
We need to target a different class and the code you added now cant make it work.Best regards,
BasilisHello Basilis,
okay, I have removed the code and also the CSS class “Silder1” in the fullwidth slider.Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
.avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow, .avia-builder-el-0.av-cell-min-height-100 > .flex_cell { height: 80vh; }Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Best regards,
YigitHello Yigit,
unfortunately it doesn*t work. I give you a admin account in the private content. Maybe you can check it easier on this way.Hi,
Thank you for disabling the caching plugins, I checked your site and have added a custom CSS class “custom-height” to the slider element on the homepage and the below code in Enfold > General Styling > Quick CSS
.custom-height .avia-slideshow { max-height: 80vh !important; } .custom-height.avia-fullscreen-slider .avia-slideshow>ul>li { background-size: 100% 100%; background-repeat: no-repeat; }The result can be seen on your homepage, the slider is now 80% of the total height of the window.
The reason your Quick CSS did not work is:
1. Due to caching issue the new CSS did not load.
2. This was not in your case but in most cases if a CSS code is not closed properly any code added at the bottom will not work.For testing purpose, I have disabled the CSS and JS merging in Enfold > Performance
Once you clear the browser cache please feel free to enable the performance options.
NOTE: Each time you add a new CSS or JS the above steps to clear cache should be performed or wait until the cache expires which is normally a couple of days.Hope your issue is resolved if not please feel free to let us know :)
Best regards,
Vinay
- You must be logged in to reply to this topic.