Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1017301

    On my page, I am using a series of color sections with background images. On desktop, everything looks PERFECT. However on mobile not so good as the images are being cropped weirdly.

    How do can fix the background images on those color sections the following ONLY on mobile. Ideally, I would like to be able to control how the images are cropped and also put the “section background overlay” as soon so the html text over the background images can be more visible.

    my page – https://leisurewines.com/home/

    #1017598

    We’re also experiencing this issue on 2 websites.
    Both are using Enfold 4.4.1.
    The issue persists when rolling back to Enfold 4.4.
    It was working a day or two ago… I thought?!
    Thanks for any suggestions you can provide!

    • This reply was modified 6 years, 2 months ago by wdwalrus. Reason: added urls
    #1017915

    Hi all,

    Here are some threads to consider:
    https://kriesi.at/support/topic/background-image-on-mobile-devices/#post-931424

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1018099

    I tried the following on my site but nothing changed

    @media only screen and (max-width:479px) {
    #top.home #av_section_1 .av-parallax {
    transform: none !important;
    }

    #top.home #av_section_1 .av-parallax-inner {
    height: 100vh;
    background-size: cover !important;
    }
    }

    I also want to add “section background overlay” as soon so the html text over the background images can be more visible ONLY on mobile

    #1019225

    Hi,

    The section number depends on where you want to add it – where do you need show us a screenshot so we can provide the correct section

    Best regards,
    Basilis

    #1019294

    I want to add adjust the position of the images and add overlay on the 4 main sections

    WHO WE ARE, LWCRAFT BEER, DISCOVER PURITY, THE GREAT WINE EXPERIMENT
    screenshot – https://imgur.com/a/c9qdRX6

    #1019507

    Hi,

    How would you like to adjust the background image? Have you tried adjusting the background position settings? You can apply an overlay in the “Section Background Overlay” panel.

    Best regards,
    Ismael

    #1020112

    Lets start with the “Section Background Overlay”

    I ONLY want it on mobile. How do I achieve that ONLY on mobile? On desktop I do not need it

    #1020150

    Hi,

    Apply the overlay and then use this css code to hide it on desktop view.

    @media only screen and (min-width: 768px) {
    .av-section-color-overlay {
        display: none !important;
    }
    }

    Use the Section ID if you don’t want to apply this modification for every color section.

    Best regards,
    Ismael

    #1020930

    I applied it but it is still showing on the desktop

    please go to https://leisurewines.com/home/ and take a look at the second section (WHO WE ARE) on both desktop and mobile

    Thanks

    #1021439

    Hi,

    I don’t see the overlay on desktop view. Please clear the browser cache.

    Best regards,
    Ismael

    #1021623

    Ok thanks

    Now is it possible to adjust the image position JUST on mobile? This will require a trial and error on each color section but if I can get the code for that, I will play around with it. Again only on mobile.

    #1022482

    Hi,

    Yes, it’s possible. You can adjust the background position with css. For example, the following css code will adjust the background image position of the “newsletter” section.

    @media only screen and (max-width: 767px) {
        #newsletter {
            background-position: top left !important;
        }
    }

    // https://www.w3schools.com/cssref/pr_background-position.asp

    Or apply a different image.

    @media only screen and (max-width: 767px) {
        #newsletter {
                background-image: url(NEW IMAGE URL HERE);
        }
    }
    

    // https://www.w3schools.com/cssref/pr_background-image.asp

    Best regards,
    Ismael

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