Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #730062

    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?

    #730099

    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

    #730117

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

    #730947

    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

    #731802

    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, 6 months ago by gekkie96.
    #732210

    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

    #737973

    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, 5 months ago by gekkie96.
    #739688

    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

    #750618

    Got it to work thanks.

    A

    • This reply was modified 7 years, 4 months ago by gekkie96.
    #752466

    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

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