Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 1, 2018 at 1:04 am #949286
    jamesedwardcouncill

    Hello – I am not sure I am posting this in the right place. I am having issues with the fallback image as well. It seems to repeat, but when I add background-repeat: no-repeat !important; into the with the quick css below – it completely removes the image. It is also shifting like it set to parallax, but it is not. Any help would be appreciated.

    .avia_mobile .avia-fullscreen-slider .avia-slideshow>ul>li{
    background-size: contain !important;
    }

    May 2, 2018 at 2:45 pm #950081
    Nikko

    Hey jamesedwardcouncill,

    Can you post a screenshot on how it looks on your end?
    You can upload the image in https://imgur.com/ and post the link here.
    You can post the link in private content if you want it to be shown only to the moderators.

    Best regards,
    Nikko

    May 2, 2018 at 2:51 pm #950086
    jamesedwardcouncill

    Hi Nikko – thanks for getting back to me. Please see screen shot here: https://imgur.com/a/V6qhzZl

    Pleasle note I do have this currently in the quick css:

    .avia_mobile .avia-fullscreen-slider .avia-slideshow>ul>li{
    background-size: contain !important;
    }
    #socket .container {
    text-align: center;
    }
    #socket .copyright {
    float: none !important;
    }

    May 3, 2018 at 5:31 pm #950963
    Nikko

    Hi jamesedwardcouncill,

    Thanks for giving us the screenshot, I tried to have no-repeat on background-repeat and it removes the top part where the image repeats, instead of using:

    background-size: contain !important;

    try to use:

    background-size: cover !important;

    this should help better. Let us know if this is helpful.

    Best regards,
    Nikko

    May 3, 2018 at 5:49 pm #950975
    jamesedwardcouncill

    Hi Nikko – seems to remove the repeat but only a small part of the image is shown now. – see here: https://imgur.com/a/HLTuzwn. I have tried all ways listed below:

    .avia_mobile .avia-fullscreen-slider .avia-slideshow>ul>li{
    background-size: contain !important;
    background-repeat: no-repeat !important;
    }

    and

    .avia_mobile .avia-fullscreen-slider .avia-slideshow>ul>li{
    background-size: cover !important;
    background-repeat: no-repeat !important;
    }

    and

    .avia_mobile .avia-fullscreen-slider .avia-slideshow>ul>li{
    background-size: cover !important;
    }

    May 3, 2018 at 11:32 pm #951145
    jamesedwardcouncill

    I have a temporary fix with this:

    .avia_mobile .avia-fullscreen-slider .avia-slideshow>ul>li{
    background-size: 300% 12% !important;
    }

    May 4, 2018 at 5:33 am #951291
    Nikko

    Hi jamesedwardcouncill,

    I have checked your site on my mobile device and it looks worse.
    I have posted a link to the screenshot on what it looks on my end (in private content).
    I can only see it look better with either contain or cover as background-size.

    Best regards,
    Nikko

    May 4, 2018 at 4:27 pm #951758
    jamesedwardcouncill

    Nikko – yikes. It looked great on iphone, but as you noted, looks terrible on android. Ok I am reverting back to the CSS below but it still gives me this on iphone: https://imgur.com/a/HLTuzwn

    .avia_mobile .avia-fullscreen-slider .avia-slideshow>ul>li{
    background-size: cover !important;
    background-repeat: no-repeat !important;
    }

    Any other suggestions?

    May 8, 2018 at 3:49 am #953031
    Ismael

    Hi,

    You can create another slider that is specifically configured for mobile device and with images that are resized for smaller screens. Use the elements’ or the sliders’ Screen Options to toggle their visibility on different devices.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.