-
Posts
-
Hi, I’ve tried every code I can find in the forum to decrease the height of the fullscreen slider on mobile devices on my homepage because the background image gets cut off where the text/logo is located. I’ve also cleared my cache after each code update to make sure that wasn’t a factor. This is the most recent code I have:
/*Fullscreen Slider Mobile Height*/ @media only screen and (max-width: 775px) { #fullscreen_slider_1 .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow { height: 100px !important; } }Hey sjahan,
It can be very difficult to control element when everything is located in an image. Maybe you could try to keep only the background as the actual background, then have the logo and text in a separate element? For instance an image element. If you have the .psd or .ai/.eps file then you should be able to do that fairly quickly.
Best regards,
RikardYes I have tried that as well, but when I embed the image in caption title area it displays very pixelated (even with the correct dimensions coded in). I was originally using the Layer Slider, but it didn’t load fast enough even when I had all of the times set to load quickly.
1. For the fullscreen slider feature, can I just decrease the height of the slider on mobile devices so that the background image isn’t as zoomed in? I will need this for a different slider background image that doesn’t have text as well.
2. If I do put the image in the caption title, how can I display it so it’s not pixelated?
Hi sjahan,
I would suggest a different slider for mobile, with optimized image and text rendered by html, not on the image.
Best regards,
Victoria
- The topic ‘Fullscreen Slider Mobile Height’ is closed to new replies.