Mobile Responsive issue – No background image on Front Page 4 Widget

Homepage › Community Forums › Ambition › Mobile Responsive issue – No background image on Front Page 4 Widget

Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 7, 2016 at 9:39 am #18602
    Gary
    Customer

      We’re having a problem with Front Page 4 widget on iPhones and iPads. The background image for this section displays properly on the desktop version of the site but is missing on the mobile version.

      The background image appears properly on an iPhone on the Ambition demo http://demo.appfinite.net/ambition/ but is missing on our site at http://energy.demovizion.com/. The white text on the white background is thus not visible.

      Our review of the HTML generated isn’t revealing any obvious differences that we can control from the widgets.

      Please advise what we can do to correct the problem. We’re happy to use default theme settings that are in use on the Ambition demo site.

      Thanks!

      Gary Meisner

      July 13, 2016 at 10:01 pm #18714
      Gary
      Customer

        P.S. This is a different issue than the conflict of the 3 sections in Front Page Widget with the Ninja plugin. Any help on why background image #2 is not showing on iOS devices is appreciated.

        Gary Meisner

        July 17, 2016 at 11:00 am #18754
        Wes
        Moderator

          Is it possible to create a temporary login so I can take a look?

          If so, just post it here as a Private Message so no one else will see it.

          July 20, 2016 at 9:52 pm #18793
          Wes
          Moderator

            Hey just checking to see if you got my reply.

            July 20, 2016 at 10:11 pm #18794
            Gary
            Customer
              This reply has been marked as private.
              July 21, 2016 at 10:20 pm #18802
              Wes
              Moderator

                It looks like when the background color is removed, it removes the entire image area on Mobile Devices all together. That’s weird, not sure why that would affect the entire area……must be something to do with the CSS/Browser.

                A workaround is to leave the background color so the image shows up (this is also useful when scrolling down and running out of image due to the text/images). The solution is to add a tall vertical background image that is large enough to cover the amount of Content you plan to have. That’s how all Parallax Styled Themes work. If you have a lot of content, the background/Parallax image can only stretch so far vertically without breaking or losing it’s quality.

                So if you have a lot of content, you’d need a large vertical image to handle the background to cover it all.

                Let me know if that makes sense.

                July 21, 2016 at 10:59 pm #18803
                Gary
                Customer

                  Hi Wes,

                  Thanks for investigating. Your comment about “when the background is removed” made me realize something. I didn’t “remove” any background images, but I see now that installing the theme and importing the xml file and widgets does NOT bring in the images. The Customize screen makes it look like the images are there because it shows the thumbnails, but the actual images were not in the Media library. I’m not sure how it appears in the site when the images are not in the media library.

                  I uploaded the default images to the background #1 and #2 positions and the theme now works properly on my demo site that uses the Ambition site as downloaded. So it works, but I now need to figure out why it’s not working on my development site for my customer.

                  Any tips on that are appreciated. I’ll do some more digging to compare both sites to find out what could be different.

                  Thanks again.

                  Gary Meisner

                  July 22, 2016 at 10:39 am #18807
                  Wes
                  Moderator

                    I was actually referring to the background-color not the background images themselves. I did a test on your site and noticed the background-color wasn’t in the CSS, and if I added it back the image would show up on an iPhone.

                    So for some reason, if there is no background-color in the CSS, then the background images won’t show on certain mobile devices (they’ll still show up on Desktops/Laptops).

                    Have you made any modifications to your style.css file? If not, I’d just copy the same file from the demo over to your development site and it should instantly fix it. If you are making modifications to your style sheet then we’ll have to manually adjust the areas I’m referring to.

                    July 25, 2016 at 5:55 pm #18857
                    Gary
                    Customer

                      Case closed! Our CSS file was in fact missing the background color. We’d made one small modification for a style on the sidebar widgets, so I’m not sure how that happened.

                      If I’d realized that the downloaded demo didn’t have the background 1 and 2 images in the media file I would have seen that this was also part of the problem and not bothered you with our mistake.

                      Thanks for the investigative work and great support.

                      Gary Meisner

                      July 27, 2016 at 12:57 pm #18868
                      Wes
                      Moderator

                        You’re Welcome!

                        Glad everything is working.

                      • Author
                        Posts
                      Viewing 10 posts - 1 through 10 (of 10 total)
                      • The topic ‘Mobile Responsive issue – No background image on Front Page 4 Widget’ is closed to new replies.