Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • August 31, 2020 at 10:09 pm #1242289
    tremblayly

    Hi

    Referring to this ticket: https://kriesi.at/support/topic/home-page-fullscreen-slider-on-mobile-devices/#post-1242011

    I still have an issue with background images not displaying correctly:
    link to ABOUT US – section background image not showing well (site access credentials are down below)
    link to DIY CORNER – section background image not showing well either

    Can you please help on how I can get the images to display correctly on mobiles devices.

    Thanks
    Lyse

    September 8, 2020 at 12:17 am #1244112
    tremblayly

    Hi
    Anyone able to help with this issue?
    Thanks
    Lyse

    September 11, 2020 at 10:42 am #1245090
    Yigit

    Hi Lyse,

    Sorry for the late reply!

    I checked your website on my iphone however background images show up fine on my end. I attached a screenshot in private content field below.
    Could you please also post screenshots and show how they look on your end? Also, which device are you using? :)

    Best regards,
    Yigit

    September 13, 2020 at 1:32 am #1245442
    tremblayly

    Hi Yigit,
    There are not showing on the ipad (landscape)
    THanks
    Lyse

    September 15, 2020 at 5:43 am #1245922
    Ismael

    Hi,

    Thank you for the update

    We tried to check the site using the login account above but the info seems to be invalid. Did you change the htaccess authentication info? Would you mind providing a screenshot of the site on iPad view?

    Best regards,
    Ismael

    September 15, 2020 at 4:28 pm #1246088
    tremblayly

    Hi Ismael,

    I’ve added the access credentials below, and they are working.

    Here are two screenshots of the About Us and DIY Jewellery Corner (anchors) where the background images don’t show well on my ipad prop landscape mode. They display correctly in portrait mode.

    https://www.dropbox.com/s/bd4xn8z01ertvnv/DIY%20about%20us.PNG?dl=0
    https://www.dropbox.com/s/1sc3tzmn5zeij1l/jewellery%20corner.png?dl=0

    Thank you
    Lyse

    September 18, 2020 at 7:21 am #1246664
    Ismael

    Hi,

    Thank you for the info.

    Did you add this css code to disable the fixed background effect?

    .fullsize {
    background-attachment: scroll !important;
}

    Please move the css code inside this css media query to target newer versions of iPad (Pro) devices.

    @media only screen and (max-width: 1366px) {
  // move css code here
}

    The fixed background effect could cause background images to be distorted on iPad devices because the property is not or partially supported by the device.

    Firefox does not appear to support the local value when applied on a textarea element.
    Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it.
    iOS has an issue preventing background-attachment: fixed from being used with background-size: cover – see details

    // https://caniuse.com/background-attachment

    Best regards,
    Ismael

    September 18, 2020 at 4:05 pm #1246846
    tremblayly

    Hi Ismael,
    I had that CSS but as you recommended I added it inside the @media only screen code.
    I now have a problem in portrait mode where the content blocks/headings are no longer centered within the background image on the ipad device only.
    Thanks,
    Lyse

    September 22, 2020 at 1:12 pm #1247609
    Ismael

    Hi,

    Thank you for following up.

    Did you change the htaccess authentication details? We could not access the site anymore. Please provide the new htaccess account and post a screenshot of the heading alignment issue if possible.

    Best regards,
    Ismael

    September 22, 2020 at 4:28 pm #1247655
    tremblayly

    Hi Ismael,
    I have added the access credentials below. Sometimes you have to enter them twice to get in.

    Here are screenshots of the issue:
    On the about us section where you can see the text is not centered in the middle: https://www.dropbox.com/s/yg3azx2jlfadnom/about%20us.PNG?dl=0

    On the jewellery corner section, the smaller image is also not centered in the middle of the background image: https://www.dropbox.com/s/1sc3tzmn5zeij1l/jewellery%20corner.png?dl=0

    On the testimonials section, the larger testimonials overlap into the next section : https://www.dropbox.com/s/nvin1x8a4lm4c28/testimonials.PNG?dl=0

    Thank you
    Lyse

    September 24, 2020 at 1:46 pm #1248143
    Ismael

    Hi,

    Thank you for the screenshots.

    In the about page, the background image doesn’t cover the whole section because the background-size property is set to contain instead of cover. This might be the same issue for other pages.

    .avia-full-stretch {
	background-size: contain !important;
}

    Did you add that css code? Please try to replace the value contain with cover.

    Best regards,
    Ismael

    September 24, 2020 at 4:02 pm #1248213
    tremblayly

    Hi Ismael,
    I removed the following CSS and all is displaying well now.
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .avia-full-stretch {
    background-size: contain !important;
    }
    }

    You may close this ticket.
    Thank you for your patience and support.
    Lyse

    September 24, 2020 at 4:13 pm #1248220
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Section background images not displaying correctly on mobile devices’ is closed to new replies.