Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1202559

    On my homepage, I’m using color sections with background images. I recently noticed that the background images look good on desktop and mobile versions, but don’t appear correctly on iPad and looks blurry/pixelated and not appealing. I have screenshots to show the difference between the versions.

    My website developer has done some researching, made several adjustments to the settings, and done multiple tests to find the solution but hasn’t found the correct settings. We updated the theme and cleared the cache but are not seeing it look correct on iPad.

    Can you direct us on how to setup the color sections with backgrounds so they appear consistent and attractive on all devices? Perhaps some additional CSS for iPad/tablet size screens? We don’t want the images to repeat.

    I’ve included screenshots below showing four background sections on the homepage that are not appearing correctly on iPad, and then the same four sections on desktop version, with crisp / correct background images.

    I appreciate your help. Please CC my web designer on your reply, if possible – CC: A (Email address hidden if logged out) .

    Thanks!

    #1203471

    Hey Lucia,

    I’m very sorry for the late reply. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .avia-full-stretch {
        background-size: contain !important;
    }
    }

    Best regards,
    Rikard

    #1204594

    Hi, thanks for that code. I tested it and it’s not showing correctly on the iPad. Most of the background image is not showing vertically and there is a lot of white space below where there should be full background image.

    Here are screenshots showing how it looks on iPad:
    First section – https://prnt.sc/s0wok4
    Second section – https://prnt.sc/s0wow9
    Third section – https://prnt.sc/s0wp8c
    Fifth/last section – https://prnt.sc/s0wpr8

    For referene –
    First section desktop (correct): https://prnt.sc/rwhvt7
    Second section desktop (correct): http://prnt.sc/rwhvxz
    Third section desktop (correct): http://prnt.sc/rwhw2y
    Fifth/last section desktop (correct): https://prnt.sc/rwhw86

    I appreciate your help. Please CC my web designer on your reply – CC: A (Email address hidden if logged out) . Thanks!

    #1209090

    Hi,
    Sorry for the late reply, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 1030px) { 
    	#top.home .av-parallax {
    		background-size: cover !important;
    	}
    }

    After applying the css, Please clear your browser cache and check.
    If you want to use different background images for mobile you can clone the section and make it visible only for mobile and then change the background image. Then ensure the original section is not visible on mobile.

    Best regards,
    Mike

    #1209423

    Thanks, I’ll try the new CSS code. I appreciate your help.

    #1209504

    Hi,
    We will leave this open to hear back from you.

    Best regards,
    Mike

    #1214814
    This reply has been marked as private.
    #1214816
    This reply has been marked as private.
    #1215545

    Hi,
    Sorry for the late reply, I have asked for someone with an iPad on the team to assist with this, thank you for your patience.

    Best regards,
    Mike

    #1215691

    Hey,

    I updated the code to following one

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

    Could you please clear browser cache on your ipad and check once again?

    Best regards,
    Yigit

    #1216326

    Hi,
    I just tried that and the images are the same on the homepage – blurry and oversized. Everywhere else is fine.

    Have we tried using different images just to see if these got affected by something? My website developer will update the theme today to see if that helps.

    Aloha,
    Lucia

    #1216328
    This reply has been marked as private.
    #1217259
    This reply has been marked as private.
    #1218409

    Hi,

    Have you tried uploading larger images? Current size of the images is around 1500x1000px and uploading a version that is twice that size should cover up retina displays nicely. The screen resolution of the latest iPad device is 2048×2732 pixels.

    Best regards,
    Ismael

    #1236548
    This reply has been marked as private.
    #1237209

    Hi,

    Thank you for the update.

    Looks like the parallax container is not resizing correctly on landscape mode. To adjust the style of the parallax container, add this code in the Quick CSS field or the style.css file.

    @media only screen and (max-width: 1366px) {
        .av-parallax {
    	background-size: cover !important;
    	background-attachment: scroll !important;
    	height: 100% !important;
        }
    }
    

    Please don’t forget to toggle the Performance > File Compression settings after adding the code.

    Best regards,
    Ismael

    #1243468
    This reply has been marked as private.
    #1244301

    Hi,

    Sorry for the delay. The css code above will only work if parallax is enabled, but looks like that the parallax effect for the color sections have been disabled.

    To make it work for non-parallax background, we disabled the Performance > File Compression settings temporarily and adjusted the code in the Quick CSS field.

    @media only screen and (max-width: 1366px) {
      .avia-bg-style-fixed, .av-parallax {
        background-size: cover !important;
        background-attachment: scroll !important;
        height: 100% !important;
      }
    }

    Please make sure to remove the browser cache prior to checking the page again on iPad.

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.