Color Section Background Images on Mobile - Support | Kriesi.at

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
October 3, 2018 at 3:05 am #1017301

navindesigns
Participant

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/

October 3, 2018 at 9:16 pm #1017598
wdwalrus
Participant
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, 1 month ago by wdwalrus. Reason: added urls
October 4, 2018 at 2:38 pm #1017915

Victoria
Inactive Moderator

Hi all,

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

Mobile: Color Section Background Position (vertical not working)

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

October 5, 2018 at 4:33 am #1018099

navindesigns
Participant

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

Home

October 8, 2018 at 9:26 pm #1019225

Basilis
Inactive Moderator

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

October 9, 2018 at 3:25 am #1019294

navindesigns
Participant

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

Home

October 9, 2018 at 2:04 pm #1019507

Ismael
Moderator

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

October 11, 2018 at 2:45 am #1020112

navindesigns
Participant

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

October 11, 2018 at 4:49 am #1020150
Ismael
Moderator
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
October 13, 2018 at 4:45 am #1020930

navindesigns
Participant

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

October 15, 2018 at 7:40 am #1021439

Ismael
Moderator

Hi,

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

Best regards,
Ismael

October 15, 2018 at 3:38 pm #1021623

navindesigns
Participant

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.

October 17, 2018 at 3:25 am #1022482
Ismael
Moderator
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
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.