-
AuthorPosts
-
September 27, 2017 at 12:29 am #857199
Hi,
I would like to make a Fullscreen Slider with a height of 400 pixels. I found one solution using a CSS code but this will change all the sliders in the theme and I would only like to adjust the height of one of them.
Thank you in advance!
Best,
AntonSeptember 27, 2017 at 12:57 am #857211Hey tonydobrevski,
If you look in your developer tools in your browser, while on the site, you will see that each element has a different ID and class, you can target just one element if you like. Combine it with the page_id to be sure that only that one page is effected.Best regards,
MikeSeptember 27, 2017 at 4:25 pm #857588This reply has been marked as private.September 28, 2017 at 2:02 am #857769Hi,
For my example please see this screenshot:
The page ID, which is really a class, targets only this page..page-id-1395
The element id is for only this element on this page, which is the first fullscreen slider on this page, note the zero.
#fullscreen_slider_0
for good measure we will add the element class, which in this case is the first builder element on this page, again note the zero.
.avia-builder-el-0
All together it looks like this:
.page-id-1395 #fullscreen_slider_0.avia-builder-el-0 {your code here}
There is a lot more to learn, like why I left a space between the page ID & the element ID, yet no space between the element ID & the element class, but you can search this on Google :)
Hope this helps.Best regards,
MikeOctober 7, 2017 at 5:19 pm #861397Hi Mike,
Thank you a lot! It worked using the following code
.page-id-287 #fullscreen_slider_0.avia-builder-el-0 {
height: 480px !important;
}However now when I open the page and thew fullscreen slider still has the original height (when loading the page) and after I scroll down the height changes to the custom height. How can I fix this?
Thank you in advance!
Best,
AntonOctober 7, 2017 at 5:55 pm #861399Hi,
Please include the url to the page in question so we can take a closer look.Best regards,
MikeOctober 8, 2017 at 10:09 am #861505*edited to hide private content
Thank you in advance!- This reply was modified 7 years, 2 months ago by tonydobrevski.
October 8, 2017 at 2:15 pm #861556Hi,
When you say that it is correct after scrolling down, is this because the transparent header is not transparent anymore?
Can you please add a screenshot to point out how you would like to see it?Best regards,
MikeOctober 9, 2017 at 9:20 pm #862109This reply has been marked as private.October 12, 2017 at 5:09 am #863133Hi,
I would like to check this but the “About” page is blank. Did you remove the page?
Best regards,
IsmaelOctober 12, 2017 at 1:06 pm #863397Hi Ismael,
Then you will be able to see the About page.
Thank you in advance!
Best,
Anton- This reply was modified 7 years, 2 months ago by Victoria.
October 12, 2017 at 2:20 pm #863437Hi Anton,
Try the code like this:
.page-id-287 #fullscreen_slider_0.avia-builder-el-0 { height: 480px !important; max-height: 480px !important; }
Best regards,
VictoriaOctober 17, 2017 at 1:13 am #865043Hi Victoria,
The same issue occurs when using this code. Is there something else that I could try?
Thank you in advance!Best,
AntonOctober 17, 2017 at 7:24 am #865172Hi,
Please turn on the custom css class field (http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/) then edit the slider. Add a unique class attribute (ex. “custom-slider”) to it. Replace the previous modification with the following css code.
.page-id-287 .custom-slider { height: 480px !important; max-height: 480px !important; overflow: hidden; }
Best regards,
IsmaelOctober 17, 2017 at 12:03 pm #865248Hi Ismael,
I used the code in this form:
.page-id-287 #fullscreen_slider_0.avia-builder-el-0 {
height: 480px !important;
max-height: 480px !important;
overflow: hidden;
}And it works perfectly. Thank you very much!
Best,
AntonOctober 18, 2017 at 7:30 am #865560Hi Anton,
Great, glad you got it working and thanks for sharing. Please let us know if you should need any further help on the topic.
Best regards,
RikardOctober 25, 2017 at 11:19 pm #869008Hi,
Thank you for all the support. You can close the topic.
Best,
AntonOctober 26, 2017 at 8:16 am #869125 -
AuthorPosts
- The topic ‘Adjust the height of the Fullscreen Slider’ is closed to new replies.