Gary

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.

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.

That’s very helpful, Wes. The Ambition theme documentation at https://appfinite.com/theme-setup/ambition-theme-setup/ lists Ninja forms, so that is the only reason we were using it. Perhaps the download demo file had that too? If installing the Genesis eNews plugin will make us consistent with the Ambition demo and resolve the issue then we will do that. Please confirm that this should take care of the problem for us. Thanks.

That was it. Thank you Andykev. For others asking the same question, I found that you don’t have to remove the video URL. You can just change the code to set the autoplay to 0 instead of 1 in two places. (autoplay=0)

I was hoping to report “all fixed” but there still seems to be an issue. On the iPad, it’s better I think but here’s what I see:

On InSync, the image on my PC screen at 1920×1080 shows the same left and right outside portions of the image that I see on my iPad. In other words, I see the street light on the left and the 4th window of the building on the right on both screens.

On SquareOne, the image on the iPad is a cropped version of the one that shows on the PC screen. I only see the red stop light on the left side and the right tip of the Bank of America sign on the right side.

So on the iPad, SquareOne is showing what appears to be exactly one half of the background image while InSync is showing it’s entire width.

I also note that when I resize the Chrome browser window on the PC from full width to the smallest possible width, that InSync visibly shrinks the size of the background image during the resize to half its original size. SquareOne retains the original size of the image. I can send or upload screen shots from the iPad if needed.

Is there a way to just use the InSynch responsive code in the SquareOne theme? InSync seems fine as is.

Hi Wes. Thanks much for making this next on your checklist. Yes, InSync looks fine on the iPad and iPhone, both in landscape and portrait.

Here’s one tip I just found that may help identify the problem:

I viewed both demos in Chrome on my PC, grabbing and resizing the width of the browser width from almost full screen to the smallest width possible.

When doing this, there’s a very different behavior that occurs in the resizing of the background image in InSync vs. SquareOne.

The background image on InSync resizes dynamically as soon as you start to decrease the width of the browser window, and it has about six different variations in background image size that it uses as you drag the browser width to the narrowest available size.

By contrast, the background image on SquareOne stays at exactly the same size until you get to just under about 750 pixels in the width of the browser window, and it then only has one other background image size that it holds all the way down to the narrowest available width of the browser window. As a result, you’re seeing only a very small portion of the background image in a smaller sized window, which gives the effect that it has been zoomed improperly.

I suspect this behavior is not confined to the iPad, but is rather just an unfortunate coincidence of the iPad’s screen resolution and dimensions being at a particularly bad point of the image not resizing properly in SquareOne as it does in InSync.

I hope that helps to narrow down where in the code the two are different and results in a quick, easy fix.

I have to agree with Vincent. Something is very wrong with the background image resizing on SquareOne for mobile platforms.

On my post above I provided some examples of the problem by creating a background with a grid of lines that were 1 pixel in width. SquareOne in mobile significantly magnified the 1 pixel line and made it blurry.

Here’s another example on my client’s site. It shows the same section of the home page as it looks in Chrome on a Windows desktop and then in Safari on an iPad.

http://www.phipoint.com/images/test/SquareOne-BeautyAnalysis-WindowsDesktop.PNG
http://www.phipoint.com/images/test/SquareOne-BeautyAnalysis-iPad.PNG
http://www.phipoint.com/images/test/SquareOne-BeautyAnalysis-iPhone.PNG

As you can see, the iPad rendering of the background image enlarges the image way beyond it actual size. There’s about 111 pixels on the original image from the tip of the woman’s ear to the center of her eye. On the iPad this same small section of the original photo is enlarged to fill about 760 pixels of the screen. This makes the site look very odd if you’re viewing it on an iPad. On the iPhone the image is still enlarged, but not by quite as much.

Thanks, Eric. I did get it working by using the tip from Wes on changing the default color in the style.css file, as shown at https://appfinite.com/topic/modifying-color-of-the-home-feature-arrow-of-just-one-area/

.squareone-orange .arrow {
border: 2px solid #ff7f3a;
}

I chose a color different than the theme that would be visible on every color section. It wasn’t an ideal solution, so I’d still recommend an enhancement to the default SquareOne theme. I do appreciate your help on this.

Thanks for checking but there is a big difference in how it resizes, even on the iPhone in landscape vs portrait. It looks abnormally zoomed in and distorted on the iPad and in iPhone landscape. In other words, it’s resizing it far larger than the original image, even on a smaller screen where there is no need to. See the difference in how the image is sized on these two photos:

http://www.phipoint.com/wp-mba/wp-content/uploads/SquareOneBG-iPhonePortrait.PNG

http://www.phipoint.com/wp-mba/wp-content/uploads/SquareOneBG-iPhoneLandscape.PNG

Landscape is zoomed to higher than the original resolution of the photo, making it look blurry and a bit odd since it’s excessively zoomed on one small part of the photo. This is how both portrait and landscape look on the iPad. The SquareOne demo has the same effect. It’s just not as obvious since it’s a building instead of a face.

That’s it! I’d never used it before and it was indeed disabled. Thanks for the help, Wes.