Parallax Background – Display Issue On Mobile devices

Homepage › Community Forums › Epik Theme Support › Parallax Background – Display Issue On Mobile devices

Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 17, 2014 at 9:24 am #12293
    mponzi
    Customer

      Hi:

      I love the ability to parallax effect in the widget areas. In learning how to use the fixed background images, I discovered a potential issue with controlling how the background images display on mobile devices (specifically iPad 3 and iPhone 4s & 5s).

      When I shrink my computer’s browser window, or load the sites into Responsinator, the backgrounds look fine. But when I view them on the actual iOS devices, they don’t look good. The mobile device just displays a highly zoomed-in portion of pixels that are in the center of the original image. There’s no resemblance to the desired background image, and it’s so enlarged that the pixelation creates a poor quality image.

      I’ve checked this on 3 sites and get the same results on all:

      1 – My test site using the Epik Theme:
      2 – Another member’s site using the SquareOne Theme:
      3 – The SquareOne Demo Site: http://demo.appfinite.net/squareone/

      If you don’t have an iOS device, here’s a link to iPad 3 screenshots of sites 1 & 2 above.

      On an iPhone, the pixel area just looks like a color, but that can’t be controlled to match the site branding.

      Hopefully, this is something that can be adjusted. These are wonderful themes, and the parallax is a very nice feature!

      Thank you for your help.

      May 17, 2014 at 9:32 am #12294
      mponzi
      Customer

        Sorry:

        Here are the links to the sites & screenshots referenced above:

        1 – My test site using the Epik Theme: http://sandbox.inboundinfocus.com/
        2 – Another member’s site using the SquareOne Theme: http://elenabenitoruiz.es/
        3 – The SquareOne Demo Site: http://demo.appfinite.net/squareone/

        iPad 3 screenshots from above sites. http://sandbox.inboundinfocus.com/appfinite-mobile-screenshots/

        May 17, 2014 at 10:53 am #12299
        Eric
        Customer

          I’ve seen that happen on a lot of parallax themes, or any theme that has a background image. It seems some mobile devices don’t know what to do when displaying large background images. Take a look at this StudioPress theme (parallax) and let me know how it looks on your device – http://demo.studiopress.com/parallax/ they all seem to look the exact same on my end.

          I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

          May 17, 2014 at 11:36 am #12300
          mponzi
          Customer

            Thanks, Eric. The Parallax Pro demo looks fine on the iPad and iPhones. Of course, the images are cropped, but that’s expected.
            they’re still recognizable and don’t really hurt the look of the mobile site.

            I added 3 iPad screenshots of the Parallax Pro demo site here: http://sandbox.inboundinfocus.com/appfinite-mobile-screenshots/

            The original background images on the ParallaxPro demo are approx 1600 x 1000 px

            Thanks for your help.

            May 17, 2014 at 12:01 pm #12301
            mponzi
            Customer

              BTW – On the iOS devices, the issue is occurring with both Chrome and Safari.

              May 17, 2014 at 7:24 pm #12306
              Eric
              Customer

                I’ve seen mentioned in another thread that Wes is coming up with a fix for it soon. I’m sure it’s something small that needs to be adjusted in the css.

                I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                May 29, 2014 at 9:38 am #12474
                Vaughan
                Customer

                  Just discovered this thread as I was looking for a solution to this very issue, having bought the SquareOne theme yesterday – love the look of it on desktop, but on mobile devices it was doing exactly as described: showing only a heavily zoomed-in portion of the background image.

                  I went delving into the CSS of Studiopress’s Parallax Pro theme, and I *think* this is the solution. It’ll display the background image on mobile, scrolling instead of fixed and somewhat cropped (i.e. just as they are on Parallax Pro), but more recognisable as to what the image actually is.

                  You need to add this in the Media Queries section of the CSS for SquareOne, for ‘@media only screen and (max-width: 1180px)’, for each of the background image areas – which in the case of SquareOne is .head-bg, .home-feature-2, .home-feature-4, .home-feature-6 and .footer-widgets:

                  background-attachment: scroll;
                  background-position: top;
                  -webkit-background-size: auto;
                  -moz-background-size: auto;
                  background-size: auto;

                  Hope this works for the moment. Sure that Wes will add some finesse to this when he issues a fix!

                  May 30, 2014 at 12:16 am #12498
                  Eric
                  Customer

                    I just emailed him about the update and apparently he already had this issue fixed a while ago (on the 20th) – https://appfinite.com/topic/parallax-background-display-issue-on-mobile-devices/#post-12474 …..Not sure how I missed it (since I’m always in the forums) but it appears to be working now.

                    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                    May 30, 2014 at 7:06 am #12502
                    Vaughan
                    Customer

                      Thanks for that, Eric. Hmm, that’s odd – as I say, I only downloaded the SquareOne theme two days ago and it was still an issue, hence why I looked around for a fix.

                      May 30, 2014 at 10:55 am #12506
                      Eric
                      Customer

                        LOL I just realized I added the wrong link. Here is the correct link – https://appfinite.com/topic/squareone-version-1-2-is-now-available/

                        Yeah the version I downloaded recently didn’t have the updated code either, but it’s in there now. Maybe try re-downloading from your account page and see if version 1.2 is at the top of your css file.

                        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                        May 30, 2014 at 11:09 am #12507
                        mponzi
                        Customer

                          Looking at Wes’ update, it looks like I could apply a similar CSS fix to Epik too. No?

                          May 30, 2014 at 7:54 pm #12518
                          Eric
                          Customer

                            @mponzi Yep it should work with Epik as well, except you’d need to change the classes to .hf1, .hf2 etc…

                            I would start out adding this to your css in the 480px media query section at the very bottom –

                            .hf1,
.hf3,
.hf4,
.hf5,
.hf6,
.hf7,
.hf8,
.hf9,
.hf14 {
	background-attachment: scroll;
}

                            I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

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