Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 17, 2021 at 3:45 pm #1294906
    TakiwaSoulArt

    Hej,

    I need help with the mobile view with background images in the color section. The images have a small golden border sometimes on the right side, sometimes on the left side. I fixed the image. In the mobile view, this small golden border is sometimes more than 10px wide. What setting do I have to make so that it remains only 1-2px wide in the mobile view? The link to the Dropbox and the website is in the private content.

    Thank you and greetings,
    Sabine

    April 20, 2021 at 7:45 am #1295442
    Rikard

    Hi Sabine,

    Your dropbox link is not working, please link directly to the image in question. I see that you are using a background image with a gold border to the left, please see private. If that is the problem, then please change the image in question with another image.

    Best regards,
    Rikard

    April 20, 2021 at 10:39 am #1295484
    TakiwaSoulArt

    Hi,

    Here is the new link – down in private content.

    Thank you

    April 22, 2021 at 6:33 am #1295934
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
#therapieangebote {
  background-attachment: inherit !important;
}
}

    Best regards,
    Rikard

    April 22, 2021 at 11:44 am #1296007
    TakiwaSoulArt

    Hi Rikard,

    I tried it, but it doesn’t work – sorry. I’m just wondering because on the normal desktop version I have the background images set to fixed, but in the mobile display the image is scrolled. Perhaps the solution may be that the background is also set to to fixed there?

    Greetings,
    Sabine

    April 25, 2021 at 12:07 am #1296561
    Mike

    Hi,
    Thank you for your patience and for the link, when I check your site it looks like there is only one section that is having an issue with the gold edge in mobile, #therapieangebote so in that case I modified Rikard’s css a little to this:

    @media only screen and (max-width: 767px) {
.avia_mobile #top.home #wrap_all #therapieangebote > .avia-full-stretch {
	background-attachment: fixed !important;
}
}

    please try this instead and clear your browser cache and check.

    Best regards,
    Mike

    April 26, 2021 at 5:14 pm #1296803
    TakiwaSoulArt

    Hi,

    unfortunately, that doesn’t work either. What I have noticed: When I am in the Customizer on the page and check the smartphone version, everything fits. The background is set to “fixed”. However, on my own smartphone – an IPhone 7 – the background is switched to scrolling. How can I change this? Because then the problem with the border would be solved. Unfortunately, I only noticed and realised this now. Thanks again for the help.

    Best regards,
    Sabine

    May 1, 2021 at 10:56 pm #1297745
    Mike

    Hi,
    Sorry for the late reply, when I check your site the above css is not showing that it has been applied, please try this code in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) {
.avia_mobile #top.home #wrap_all #therapieangebote > .avia-full-stretch {
	background-attachment: fixed !important;
}
}

    Then clear your browser cache and any cache plugin, and check.
    If you still don’t see any difference please leave the css in place so we can also test.
    If the above css is in place then please include an admin login in the Private Content area so we can check why it is not showing that it has been applied.

    Best regards,
    Mike

    May 3, 2021 at 12:44 pm #1297982
    TakiwaSoulArt

    Hi,

    I have used the code in the Customizer. Everything works on the laptop, but on the IPhone 7 the background is still set to “scroll”. I left the code in the customizer and created an admin account. The data is in the private content.

    Many thanks for the help and best regards, Sabine

    May 6, 2021 at 9:17 am #1298733
    Ismael

    Hi,

    Some iOS devices do not fully support fixed background and have issue with background image when its size is set to “cover” as explained in the following thread.

    // https://caniuse.com/background-attachment
    // https://stackoverflow.com/questions/21476380/background-size-on-ios

    iOS has an issue preventing background-attachment: fixed from being used with background-size: cover – see details

    Unfortunately, the solution that they provided in the thread is not doable in the theme because the background is applied to the parent section or container.

    Best regards,
    Ismael

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