Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • September 27, 2017 at 12:29 am #857199
    tonydobrevski

    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,
    Anton

    September 27, 2017 at 12:57 am #857211
    Mike

    Hey 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,
    Mike

    September 27, 2017 at 4:25 pm #857588
    tonydobrevski
    This reply has been marked as private.
    September 28, 2017 at 2:02 am #857769
    Mike

    Hi,
    For my example please see this screenshot:
    2017-09-27_193941
    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,
    Mike

    October 7, 2017 at 5:19 pm #861397
    tonydobrevski

    Hi 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,
    Anton

    October 7, 2017 at 5:55 pm #861399
    Mike

    Hi,
    Please include the url to the page in question so we can take a closer look.

    Best regards,
    Mike

    October 8, 2017 at 10:09 am #861505
    tonydobrevski

    *edited to hide private content
    Thank you in advance!

    October 8, 2017 at 2:15 pm #861556
    Mike

    Hi,
    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,
    Mike

    October 9, 2017 at 9:20 pm #862109
    tonydobrevski
    This reply has been marked as private.
    October 12, 2017 at 5:09 am #863133
    Ismael

    Hi,

    I would like to check this but the “About” page is blank. Did you remove the page?

    Best regards,
    Ismael

    October 12, 2017 at 1:06 pm #863397
    tonydobrevski

    Hi Ismael,

    Then you will be able to see the About page.

    Thank you in advance!
    Best,
    Anton

    • This reply was modified 7 years, 1 month ago by Victoria.
    October 12, 2017 at 2:20 pm #863437
    Victoria

    Hi 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,
    Victoria

    October 17, 2017 at 1:13 am #865043
    tonydobrevski

    Hi Victoria,

    The same issue occurs when using this code. Is there something else that I could try?
    Thank you in advance!

    Best,
    Anton

    October 17, 2017 at 7:24 am #865172
    Ismael

    Hi,

    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,
    Ismael

    October 17, 2017 at 12:03 pm #865248
    tonydobrevski

    Hi 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,
    Anton

    October 18, 2017 at 7:30 am #865560
    Rikard

    Hi 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,
    Rikard

    October 25, 2017 at 11:19 pm #869008
    tonydobrevski

    Hi,

    Thank you for all the support. You can close the topic.

    Best,
    Anton

    October 26, 2017 at 8:16 am #869125
    Ismael

    Hi,

    Alright. Thank you for using Enfold. Have a nice day!

    Best regards,
    Ismael

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Adjust the height of the Fullscreen Slider’ is closed to new replies.