Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Image BG issue - paralax and mobile devices

Featured Lock Resolved Issue
Hey there, I hope you're doing well. I am having an issue where a background image which looks great on desktop, looks great on a desktop that is resized to phone size, looks great in the Page Builder editor, looks great in the Page Builder Mobile screen size editor, but actually looks terrible and totally different on a real phone. Any help? Here is the page and here are the images showing what I mean.

Thank you in advance!

https://www.otato.ca/services/websites

desktop looks good.jpg
Desktop Mobile Size looks good.jpg
Page Builder Looks good.jpg
Actual Phone looks terrible.jpg

Attachments (4)

  • desktop looks good.jpg
    desktop looks good.jpg 543.5 KB
  • Desktop Mobile Size looks good.jpg
    Desktop Mobile Size looks good.jpg 255.6 KB
  • Page Builder Looks good.jpg
    Page Builder Looks good.jpg 530.2 KB
  • Actual Phone looks terrible.jpg
    Actual Phone looks terrible.jpg 116.8 KB

5 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hopefully, you have two alternative ways:
1) Create an alternative row with different settings and set to display on mobile devices only.
OR
2) Use Custom CSS and force this Row to use
background-attachment: scroll and diffrent value for background-size - instead.

For example try below fix for Row with text inside "Yes, but is it mobile?":


@media (max-width: 640px) {
.sp-page-builder .page-content #section-id-1557374709158 {
background-size: contain;
background-attachment: scroll; }
}



Play with those two values, maybe only a different value for background-size is needed.

---
Is all clear now?

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
it's from the obvious reason, the most mobile browsers (iPhone too) doesn't support background-attachment:fixed combined with background-size: cover and instead make a design mess. That's why we have a description under that option.

0-o.png

why_apple.png

Attachments (2)

  • 0-o.png
    0-o.png 3.6 KB
  • why_apple.png
    why_apple.png 25.7 KB

Hayden Cyr

More than a month ago #Permalink
Thank you for the explanation and the hints! I didn't see that warning on the page where I chose the background image otherwise I would have taken heed of it. I see it now but only when I click and read the "?" button above it. It is not displayed underneath it as it shows in your screenshot.

May I suggest that for warnings that these icons be red in colour and an "!" instead of the standard grey question mark? Especially when it's something that isn't apparent in the browser where all of the editing is done. Just a suggestion.

Thank you again for all of your help, I always appreciate it.

Paul Frankowski - Staff

More than a month ago #Permalink
In the back-end those descriptions are more visible. We will consider something for sure.
--
You're welcome


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 112
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 111
Toufiq

Toufiq

Total Accepted Answers: 69
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 5
FUTURECLIENT

FUTURECLIENT

Total Accepted Answers: 2

115

Templates

296452

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us