Home Forums Glissando Images on Mobile Device not showing (parallex effect)

This topic contains 10 replies, has 4 voices, and was last updated by  Joshua 2 weeks ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #45325

    Hi

    Certain images are not showing as background images when they are set to Parallex effect – they work fine on PC screen and also when using developers mode to test responsiveness on PC but not on an actual iPhone or iPad

    The page with this problem is http://laytonandrews.greenlizardsolutions.com/about-us/?slide=business-to-next-level – Expertise, Clients and Our Difference

    Is there anything that can be done to make them work on mobile devices or to enable us to have different settings on mobile device as without the image the text and background are both white and nothing shows and it is essential that the pages show on mobile devices as more than 75% of our target audience will use mobile devices to view the site

    Thanks in advance

    Kevin

    #45328

    gimbha
    Participant

    Hi there, I’m having a similar issue.

    The images are appearing on mobile for my site but they are not scaling, and therefore display as a blown up version of the original image. Totally unattractive. They look fine when viewed on a computer.

    The site is http://www.eryndefoort.com

    Looking forward to hearing how I can fix this.

    #45334

    Joshua
    Keymaster

    Sorry for the late reply (due to holidays). Please try the solution on this thread and let me know if it helps – http://themeluxe.com/support/topic/images-missing-and-video-not-playing-on-ipad/#post-44636

    Some mobile devices can’t yet handle the parallax effect, hence the blown up image.

    #45339
    This reply has been marked as private.
    #45343

    Joshua
    Keymaster

    The issue is that the background for that section is only 600px in height, while that section on a mobile device becomes 720px in height. You can either upload a larger image or set the container background to stretch/cover to ensure the white text isn’t displayed on a white background.

    #45345

    Is it possible to use parallex image on desktop but to stretch the image on a mobile device to fix this issue?

    #45348

    Joshua
    Keymaster

    Sure. This is to make all your mobile backgrounds stretch.

    @media only screen and (max-width: 768px) {
    .container {
        background-size: cover !important;
    }
    }

    And this is for just changing that specific section/container if you don’t want to modify all containers on mobiles:

    @media only screen and (max-width: 768px) {
    #container-791 {
        background-size: cover !important;
    }
    }
    #45421

    gimbha
    Participant

    Hey thank you for this! I was delayed in returning to find your answer.

    The CSS code you provided definitely helped, although the image still feels too big for the mobile device screen – it is more manageable now, it doesn’t look super-zoomed in.

    Thank you. Any further suggestions for tweaking it that last little bit?

    #45423

    Joshua
    Keymaster

    I can’t see the page right now as there is a “Coming Soon” page up, but I can tell you that if the background is set to ‘cover’ then your next best bet is probably to minimize the height of the container. Since the background has to be large enough to cover both width and height with this background type, one of those will be limiting factors.

    The only other option would be to play with background position if there’s a portion of the image that would be more appropriate.

    @media only screen and (max-width: 768px) {
    #container-791 {
        background-size: cover !important;
        background-position: 30% 50%;
    }
    }

    The container ID like above (791) refers to a specific container on your page. Make sure and change this container ID depending on the section you’re trying to modify. The position percentages correlate to x and y for the relative image position.

    #47287

    pklund
    Participant

    I have this problem with the front page on my website, even after the fix. Only the top left corner of the image is visible on iPhone and iPad.

    I added this to the custom CSS:

    @media only screen and (max-width: 1024px) {
    .container {
    background-attachment: scroll !important;
    }
    }

    The image is set to “stretch to fit” + parallax effect. The problem seems to continue after clearing the cache.

    http://healingpeopleandanimals.com

    #47291

    Joshua
    Keymaster

    Hi @plunkd

    It looks like you’re using separated pages instead of the one-page. For this you might try adding the following to your Custom CSS:

    @media only screen and (max-width: 1024px) {
    body {
    background-attachment: scroll !important;
    }
    }
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.