Background missing on Samsung mobile...

User 10077 Photo


Senior Advisor
1,095 posts

URL: https://www.windowtinting.com/window-ti … eement.htm

This is a strange one. On the URL above, when I view it on my iPhone (tried Safari, Chrome and Bing), the background of the main part of the page is a light blue with content that has a gray background with a swish pattern. See attached: wt-sa-iphone.jpeg

My client, using a Samsung phone, doesn't see the gray background with the swish. They cleared their cache and still don't see the background. See attached: wt-sa-samsung.jpg

My friend, using a Nokie phone, sees the gray background.

On desktop, the gray background appears correctly.

Does anyone have any idea why the background would not appear correctly on the Samsung?
Attachments:
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including training for Site Designer and Web Form Builder via Zoom.
Email me at support@usconsumernet.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 379556 Photo


Registered User
1,533 posts

A different, but perhaps related, problem appears at https://stackoverflow.com/questions/388 … -on-iphone .

In view of that, it might be worth experimenting with the background image in a different format, such as PNG.

Frank
User 2885740 Photo


Registered User
60 posts

Hi Brian

On my Samsung device I see that the background-image “background_swish.jpg” is not shown in the native Samsung Browser, or in the Chrome Browser. However, it is shown in Firefox on that same device. Strange indeed.
I’m guessing, but you could try to change some properties in class “main-content-container”. Try background-size: cover (instead of 'auto') and background-repeat: no-repeat.
In your CSS I noticed you have defined that class twice (for the same breakpoint): on line 1158 and 2114. Perhaps good to know, when changing the properties.
User 10077 Photo


Senior Advisor
1,095 posts

René wrote:
Hi Brian

On my Samsung device I see that the background-image “background_swish.jpg” is not shown in the native Samsung Browser, or in the Chrome Browser. However, it is shown in Firefox on that same device. Strange indeed.
I’m guessing, but you could try to change some properties in class “main-content-container”. Try background-size: cover (instead of 'auto') and background-repeat: no-repeat.
In your CSS I noticed you have defined that class twice (for the same breakpoint): on line 1158 and 2114. Perhaps good to know, when changing the properties.

Thanks. It turns out that it is a Samsung browser issue. I had the background defined in both fallback first and display grid. I removed one of them and everything works. Thanks for the help!
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including training for Site Designer and Web Form Builder via Zoom.
Email me at support@usconsumernet.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 122279 Photo


Senior Advisor
14,447 posts

It would interest me to know which one you removed. If I use CSS grid, it is always when building mobile-up, and I never let the grid kick in until I get past the first breakpoint (a bit depending on the framework). So, what I create for phone size screens will always be before the grid takes effect.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2885740 Photo


Registered User
60 posts

It turns out that it is a Samsung browser issue

Not quite. Not only the Samsung browser has this issue, but also the Chrome Browser.
I see on your website that my suggestion “background-size: cover” solved it. Apparently this issue is connected to the setting “background-size: auto”.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.