Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 10, 2016 at 10:37 am #670729
    Dbertelsen

    Hi guys,
    My boss wants the front-page slider to be more slim (height-wise). Thus, I’ve had to use custom-sized slider images (1500×300).
    However, this has complicated the responsiveness of the slider caption – and its buttons. The buttons are not showing correctly (fall outside the slider) when the browser window is below 1370 pixels wide.

    Thus, I need the buttons to be “smaller” (padding/margin) so they can fit in the slider image and thus be displayed when the page is viewed in browsers below 1370 pixels.

    Can you help me out?

    August 10, 2016 at 3:21 pm #670860
    Yigit

    Hi Daniel!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1370px) {
.avia-multi-slideshow-button.avia-slideshow-button {
    margin-top: -10px!important;
}}

    Best regards,
    Yigit

    August 10, 2016 at 4:29 pm #670924
    Dbertelsen

    Hi Yigit!
    Thanks, but for some reason it doesn’t seem to work? The buttons seem to be immune to the change in margin-top: -10px, and thus still fall outside the slider.

    I’ve even tried to change the margin-top value to -100px, and there’s no difference.

    August 11, 2016 at 7:13 pm #671506
    Dbertelsen

    Any suggestions?
    You’re more than welcome to have a look at my Quick CSS that I’ve used. Would really appreciate your input and help.

    August 11, 2016 at 7:36 pm #671525
    Basilis

    Hey!

    If you play around with the margin position, does it change?
    Please do check that and let us know, so we can see if the negative margin is creating the issue.

    Thanks alot

    Regards,
    Basilis

    August 11, 2016 at 11:19 pm #671582
    Dbertelsen

    Yeah there’s nothing. I’ve just changed the margin to 100px and the buttons are not being affected.
    Also the buttons are now “round” instead of square.

    I’ve provided the login information in the private section

    August 12, 2016 at 9:25 pm #672070
    Dbertelsen

    Any suggestions?

    August 15, 2016 at 5:27 am #672473
    Ismael

    Hi,

    Another workaround is to add another slider, full screen slider perhaps, that is specifically created for mobile. Toggle the sliders’ display properties with css. http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.