Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 21, 2014 at 5:36 am #322573
    dburton77

    Hi! Great theme!

    I’m looking for a way to increase the height of the slider when viewing in portrait orientation in Responsive mode on a smartphone so that the slider image fills up about 60% of the height of the screen instead of the approx. 30% height of the screen it currently does. However, I don’t want to increase the height of the slider for desktop/laptop viewing. What’s the solution?

    Best,

    Doug

    September 22, 2014 at 8:38 am #322847
    Ismael

    Hey dburton77!

    Thank you for using Enfold.

    Which type of slider are you using right now? A link to the actual page with the slider will help.

    Best regards,
    Ismael

    September 22, 2014 at 11:48 am #322922
    dburton77

    I’m using the most recent version of Enfold with the Layer Slider WP included. The slider can be seen on the site’s home page here:

    http://saltworksdigital.com

    Doug

    September 22, 2014 at 12:23 pm #322937
    Yigit

    Hey!

    Unfortunately it is not possible. However, as a workaround, you can create another slider to be displayed on mobile and place right under your current slider and add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
div#layerslider_3 { display: none; }}
@media only screen and (min-width: 769px) {
div#layerslider_4 { display: none; }}

    Cheers!
    Yigit

    September 25, 2014 at 3:59 pm #325059
    dburton77

    Great workaround idea! I tried it and it does indeed seem to hide the proper slider for the desired medium. However, it leaves a big space where the other slider would appear. See:

    http://www.saltworksdigital.com

    How do we force it to close the gap?

    September 25, 2014 at 4:08 pm #325069
    Yigit

    Hey!

    Please change the code to following one

    @media only screen and (max-width: 768px) {
div#layerslider_1 { display: none; }}
@media only screen and (min-width: 769px) {
div#layerslider_2 { display: none; }}

    Regards,
    Yigit

    September 25, 2014 at 7:12 pm #325186
    dburton77

    I tried the new code you suggested but it still doesn’t remove the gap/space. I cleared the cache and everything.

    September 25, 2014 at 7:19 pm #325193
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately so we can look into it?

    Regards,
    Yigit

    September 25, 2014 at 8:13 pm #325237
    dburton77
    This reply has been marked as private.
    September 25, 2014 at 8:37 pm #325248
    Yigit

    Hey!

    I have added the code to Style.css file of your child theme flushed cache and it does seem to work fine. Please check your website now

    Cheers!
    Yigit

    October 6, 2014 at 9:46 am #330747
    dburton77

    Hey, that worked great. However, I had to change the sliders that need to show from #3 and #5 to #3 and #6. I think I broke something. Can you take a look?

    October 7, 2014 at 12:52 am #331242
    dburton77

    Actually, nevermind. I figured it out. Thanks for all the help with this Yigit. I love how our site looks with this theme!

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Increase Height of Slider in Responsive mode’ is closed to new replies.