![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
January 5, 2017 at 8:47 pm #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?
January 5, 2017 at 10:54 pm #730099Hey 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,
BasilisJanuary 6, 2017 at 12:16 am #730117Is 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 #730947Hi,
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,
IsmaelJanuary 11, 2017 at 1:43 am #731802Thank 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, 8 months ago by
gekkie96.
January 11, 2017 at 6:38 pm #732210Hi!
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,
YigitJanuary 24, 2017 at 10:35 pm #737973Hi 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, 7 months ago by
gekkie96.
January 28, 2017 at 6:57 am #739688Hi!
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!
IsmaelFebruary 22, 2017 at 7:43 pm #750618February 27, 2017 at 8:35 pm #752466Hi,
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 -
This reply was modified 7 years, 8 months ago by
-
AuthorPosts
- The topic ‘Swap Background Image on Fullscreen Slider on Mobile’ is closed to new replies.