-
AuthorPosts
-
May 14, 2018 at 6:27 am #956248
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!
May 14, 2018 at 10:34 pm #956712Hey 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,
BasilisMay 15, 2018 at 5:26 am #956794Hello Basilis,
okay, I have removed the code and also the CSS class “Silder1” in the fullwidth slider.May 16, 2018 at 10:15 pm #957761Hi,
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,
YigitMay 17, 2018 at 6:03 am #957919Hello 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.May 19, 2018 at 11:03 am #959012Hi Andreas_BS,
Can you disable caching and minification for now?
Best regards,
VictoriaMay 19, 2018 at 11:18 am #959019Hi Victoria,
okay, done.Greetings
Andreas
May 20, 2018 at 3:27 am #959281Hi,
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,
VinayMay 20, 2018 at 11:45 am #959414Hello Vinay,
okay, thank you for your work and the explanation.Greetings
Andreas
May 21, 2018 at 11:15 am #959657Hi Andreas,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.