Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 18, 2015 at 9:08 pm #520682
    Sladestyle

    Hi,

    Here is the staging site: http://staging.loopcreative.co/mckesson/

    As you can see I have several Color Sections with a background image. They are all set to “Parallax”. I have set the background image position on the first image at the top to Top/Right. The other images going down the page have the same issue but with different Positions set.

    The Top/Right appears to work just fine when viewing on the desktop at any browser width. However, when I view it on my iPad and iPhone the position reverts to Bottom/Right.

    2 other issues I am seeing (let me know if you would rather I begin a new thread for these)
    1. The top Nav appears to “flash” off/on when hovering over a menu item. Is this normal? Anyway to turn that off?
    2. When I refresh the screen from time to time the header area shows a white background rather than being transparent. If I refresh it will correct itself to transparent. Any idea why this is happening? It doesn’t appear to happen 100% of the time but maybe 80%..??

    Thanks for your help!

    October 19, 2015 at 7:14 pm #521137
    Elliott

    Hi Slade!

    I don’t have an iPad to test on but when I resize the browser it is displaying topright for me at all sizes. Can you take a screenshot and highlight what your seeing?

    Perhaps you need to clear Safari cache and any caching related plugins you might have installed.

    Cheers!
    Elliott

    October 22, 2015 at 9:08 am #522776
    Sladestyle

    Hi Elliot!

    Sorry for the delay…been out of town. I tried deactivating all plugins as well as making sure my cache is cleared to no avail.

    Here are a couple of screenshots from my iPad (it is even worse on the iPhone)…see attached.

    You will notice a large section at the bottom of the pics that is blurry. I had to place something there to take up some space because when the background image is set to “parallax” it increases the image size so much that it becomes enormous. The extra “stuff” attached to the bottom of the images is to keep them more appropriate to the correct size on screen.

    Regardless…since I have them positioned TOP/RIGHT we shouldn’t see the bottom and as you can see the top of the images are cut off on mobile devices which it shouldn’t be.

    Thanks!

    October 22, 2015 at 9:09 am #522778
    Sladestyle

    Hi Elliot!

    Sorry for the delay…been out of town. I tried deactivating all plugins as well as making sure my cache is cleared to no avail.

    Here are a couple of screenshots from my iPad (it is even worse on the iPhone)…see attached.

    You will notice a large section at the bottom of the pics that is blurry. I had to place something there to take up some space because when the background image is set to “parallax” it increases the image size so much that it becomes enormous. The extra “stuff” attached to the bottom of the images is to keep them more appropriate to the correct size on screen.

    Regardless…since I have them positioned TOP/RIGHT we shouldn’t see the bottom and as you can see the top of the images are cut off on mobile devices which it shouldn’t be.

    Thanks!

    October 22, 2015 at 5:27 pm #523155
    Elliott

    Hey!

    When you have the color section set to 100% height like that then the image is going to appear zoomed in sometimes depending on the screen size. I think what your wanting is to use the “center center” background position.

    Regards,
    Elliott

    October 22, 2015 at 11:37 pm #523361
    Sladestyle

    I tried “center/center” along with the other options. Same issue – always reverts to bottom/”” on mobile. The background isn’t set at 100% height…it is set “no minimum height…”. I have tried setting it to a custom pixel height but that doesn’t help either…still reverts to Bottom/Right.

    October 23, 2015 at 3:57 pm #523925
    Elliott

    Hey!

    Well I see in your source code that you do have them set to bottom right position. Are you sure you tried “center center”? Perhaps your using a caching plugin and need to clear the cache?

    Send us a WordPress login and we’ll take a look.

    Best regards,
    Elliott

    October 23, 2015 at 9:33 pm #524114
    Sladestyle

    Reading your reply you mention – “I can see in the source code you have them set to bottom right…”. I don’t have them set to bottom right in the Page Admin. I have them set to Top/Right but they are showing up…only on mobile…as Bottom/Right. Did you mean Top/Right or does the source code actually say Bottom/Right?

    Not using a caching plugin and definitely tried center/center.

    Attaching login credentials…

    • This reply was modified 9 years, 1 month ago by Sladestyle.
    October 26, 2015 at 5:29 pm #525073
    Elliott

    Hi!

    I’m getting a 504 gateway timeout when trying to access your site. Contact your hosting provider and check to see if everything is ok.

    Cheers!
    Elliott

    October 26, 2015 at 7:06 pm #525143
    Sladestyle

    Hi Elliot!

    Not sure what that was. Can you try again? http://staging.loopcreative.co/mckesson/

    October 28, 2015 at 10:15 am #525970
    Ismael

    Hi!

    It looks OK on iPad view when I checked it. The background position is set to 100% 0 which is the same as “top right”.

    However, it doesn’t look good smaller screens. Edit the color section then add a unique id in the Section ID field. Use “section-1” for example, then use this to control the background position on smaller screens:

    @media only screen and (max-width: 767px) {
#section-1 .av-parallax {
    background-position: 80% 0% !important;
}
}

    Cheers!
    Ismael

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