Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 5, 2017 at 8:47 pm #730062
    gekkie96

    On your demo for the one page portfolio is it possible to show a solid color on mobile instead of the background image for the top fullscreen slider?

    January 5, 2017 at 10:54 pm #730099
    Basilis

    Hey gekkie96,

    Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

    January 6, 2017 at 12:16 am #730117
    gekkie96

    Is it that complicated to have a media query to show a color for certain screen sizes instead of the background image?

    January 9, 2017 at 4:44 am #730947
    Ismael

    Hi,

    Please turn on the custom css class field, add a unique class attribute to the slider then apply the following css code.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .avia-fullscreen-slider .avia-slideshow > ul > li:first-child {
     background-image: url(IMAGE URL HERE) !important;
  }
}

    Replace the selector “.avia-fullscreen-slider” with the custom css class attribute.

    Best regards,
    Ismael

    January 11, 2017 at 1:43 am #731802
    gekkie96

    Thank you for the reply. I’m not sure I understand everything you said, I’m also not technical.

    I turned on the custom CSS, added the custom class name and put the below in the quick css, but its not working.

    @media only screen and (max-width: 767px) {
background-color: #000000;
  .herom .avia-slideshow > ul > li:first-child {
     background-image: url(https://domainhere.com/wp-content/uploads/2015/02/vanish-bg3.jpg) !important;
  }
}

    Thanks

    • This reply was modified 7 years, 11 months ago by gekkie96.
    January 11, 2017 at 6:38 pm #732210
    Yigit

    Hi!

    Please change the code to following one 

    @media only screen and (max-width: 767px) {
  .herom .avia-slideshow > ul > li:first-child {
     background-image: url(https://domainhere.com/wp-content/uploads/2015/02/vanish-bg3.jpg) !important;
  }
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
    Regards,
    Yigit

    January 24, 2017 at 10:35 pm #737973
    gekkie96

    Hi Yigit,

    I tried your updated code, but it does not swap the background image for a solid color when on mobile. Working local or I would share the URL.

    • This reply was modified 7 years, 11 months ago by gekkie96.
    January 28, 2017 at 6:57 am #739688
    Ismael

    Hi!

    Did you adjust the url? Please provide a link to the actual page with the slider. Or try this:

    @media only screen and (max-width: 767px) {
  .herom > ul > li:first-child {
     background-image: url(https://domainhere.com/wp-content/uploads/2015/02/vanish-bg3.jpg) !important;
  }
}

    Change this url “http://domainhere.com”.

    Cheers!
    Ismael

    February 22, 2017 at 7:43 pm #750618
    gekkie96

    Got it to work thanks.

    A

    • This reply was modified 7 years, 10 months ago by gekkie96.
    February 27, 2017 at 8:35 pm #752466
    Vinay

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Swap Background Image on Fullscreen Slider on Mobile’ is closed to new replies.