Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 10, 2021 at 9:36 pm #1305122
    jifei

    Hello,

    I’ve been having some issues with the mobile display of some of the website pages, it appears that the background images are resized for the portrait mobile view. However, even though I’ve selected the fixed attachment (although it translates to the scroll attachment in mobile), and “center center” image position, these appear to be displaying in the “center bottom” alignment.

    Is there some way i can override this native behavior without having to change the image attachment to scroll?

    Thanks,

    Joe

    June 14, 2021 at 6:59 am #1305527
    Ismael

    Hey jifei,

    Thank you for the inquiry.

    Would you mind providing screenshot of the issue? The background images seem to be displaying properly on our end. This is how it looks.

    Screenshot: https://postimg.cc/2q8gK9g6

    Best regards,
    Ismael

    June 17, 2021 at 5:30 pm #1306227
    jifei

    Hi Ismael,

    Thanks for getting back to me!

    The image in the screenshot you sent looks good, however on my iPhone 12, looking in both safari and chrome, the image is still offset to the center bottom instead of the center center, which causes awkward cropping of the images on the webpage. Please refer to the images linked below.

    Best,

    Joe

    June 18, 2021 at 9:26 am #1306315
    Ismael

    Hi,

    Thank you for the screenshots.

    Have you tried setting the background-attachment to “scroll” on mobile view?

    @media only screen and (max-width: 989px) {
    .avia-bg-style-fixed {
        background-attachment: scroll !important;
    }
}

    This is how the background should look when set to “scroll”.

    Screenshot: https://imgur.com/dbUFKtn

    Best regards,
    Ismael

    June 21, 2021 at 11:39 pm #1306830
    jifei

    Hi Ismael,

    Thanks for your reply! I’ve added the css code to the Quick CSS and flushed my cache but the pages still appear the same on my iphone.

    Is there anything else i can look into or try?

    Best,

    Joe

    June 23, 2021 at 11:10 am #1307111
    Ismael

    Hi,

    It seems to be working properly now.

    Screenshot: https://ibb.co/RCXn4J4

    Have you tried to toggle or temporarily disable the Enfold > Performance > File Compression settings? Or try to check the site on incognito mode.

    Best regards,
    Ismael

    June 24, 2021 at 12:11 am #1307215
    jifei

    Hi Ismael,

    I’ve tried all of your suggestions above (toggling file compression, incognito mode) but it is still displaying the same cropped, offset image for me. I also looked on another iPhone and it shows up the same. Also I flushed the cache again and looked on both safari and chrome.

    Anything else i might be missing?

    Thanks,

    Joe

    June 30, 2021 at 3:26 pm #1308154
    Yigit

    Hi,

    I could reproduce it on my iphone. Could you please try adding following code to bottom of Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (max-width: 480px) {
.avia_mobile #top .av-parallax {
height: 100%;
}}

    Result should be as shown in screenshot below :)

    Best regards,
    Yigit000

    • This reply was modified 3 years, 5 months ago by Yigit.
    June 30, 2021 at 5:47 pm #1308186
    jifei

    Hi Yigit,

    Thanks for your reply! For some reason, after i ad your code to the Quick CSS, my font and styling for all my desktop web pages get overwritten with the defaults (please see photos in the link below). Is there something I can change to the code you provided that will not interfere with this?

    Best,

    Joe

    June 30, 2021 at 6:09 pm #1308195
    Yigit

    Hi Joe,

    I realized I missed a closing curly bracket. Sorry about that.
    I updated the code in my previous post and fixed the code. Could you please try it again?

    Best regards,
    Yigit

    June 30, 2021 at 6:17 pm #1308196
    jifei

    Works perfect now thanks so much!

    June 30, 2021 at 6:56 pm #1308200
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Color section background image mobile resizing error’ is closed to new replies.