How to get background to be responsive in Divider template?

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
dnlyko
 
 
Posts: 34
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

How to get background to be responsive in Divider template?

Post by dnlyko » Fri Apr 26, 2019 9:41 am

Something strange...
The background is adaptive when viewing on my PC. I can change the browser to any size and the site including the background is adaptive.
When I view it on my iPad, iPhone 6Plus or Nokia 1520 phone, the background is not adaptive. But when I view it on my Alcatel Idol 4s, it displays properly.

dnlyko
 
 
Posts: 34
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: How to get background to be responsive in Divider template?

Post by dnlyko » Fri Apr 26, 2019 9:42 am

smoothruler.com

User avatar
Pablo
 
Posts: 15940
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get background to be responsive in Divider template?

Post by Pablo » Fri Apr 26, 2019 9:59 am


dnlyko
 
 
Posts: 34
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: How to get background to be responsive in Divider template?

Post by dnlyko » Fri Apr 26, 2019 2:59 pm

Pablo wrote:
Fri Apr 26, 2019 9:59 am
Related topic:
viewtopic.php?f=5&t=84661
This does not provide a solution.

Only have 1 page on site.

I can't understand why the page displays properly (completely responsive) on a PC at any and all resolutions.
Everything displays properly (completely responsive) on all devises except the background

User avatar
Pablo
 
Posts: 15940
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get background to be responsive in Divider template?

Post by Pablo » Fri Apr 26, 2019 3:09 pm

I'm sorry, but I do think the topic is related.
Did you try the suggestion?
I can't understand why the page displays properly (completely responsive) on a PC at any and all resolutions.
The issue is related to the way browser handles 'overflow' as mentioned on the other topic.
The 'slant' divider you are using sets the width of the slant to 150% which causes the slant to be wider than the viewport.

dnlyko
 
 
Posts: 34
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: How to get background to be responsive in Divider template?

Post by dnlyko » Fri Apr 26, 2019 3:58 pm

Yes I tried all suggestions including adding the "html{overflow-x:hidden;}" to the bottom of index.css

User avatar
Pablo
 
Posts: 15940
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get background to be responsive in Divider template?

Post by Pablo » Fri Apr 26, 2019 4:15 pm

Did you refresh the browser cache?

dnlyko
 
 
Posts: 34
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: How to get background to be responsive in Divider template?

Post by dnlyko » Fri Apr 26, 2019 4:21 pm

Yes

User avatar
Pablo
 
Posts: 15940
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get background to be responsive in Divider template?

Post by Pablo » Fri Apr 26, 2019 4:47 pm

In that case, I think it's related to the parallax or fixed background. On the iPad/iPhone this does not work in combination with 'cover'.
See 'known' issues':
https://caniuse.com/#search=background-size

There are two things you can try:
- if you use breakpoints, select a different background mode for smaller sizes
or
- in the page properties -> advanced -> Enable safari background fix.

dnlyko
 
 
Posts: 34
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: How to get background to be responsive in Divider template?

Post by dnlyko » Fri Apr 26, 2019 5:03 pm

no breakpoints just the template

already tried that to no avail

dnlyko
 
 
Posts: 34
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: How to get background to be responsive in Divider template?

Post by dnlyko » Fri Apr 26, 2019 5:04 pm


User avatar
Pablo
 
Posts: 15940
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get background to be responsive in Divider template?

Post by Pablo » Fri Apr 26, 2019 5:23 pm

Then maybe the image format is not correct?
Does it work with te standard images form the template?

dnlyko
 
 
Posts: 34
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: How to get background to be responsive in Divider template?

Post by dnlyko » Fri Apr 26, 2019 5:47 pm

it's just a jpg and works fine elsewhere.

i guess that template will not work with the page having an image as a background.

i was hoping to build a simple single page responsive page website and that is what my customer paid me for.
i have now lost so much time on this.
i will just start from scratch and build it like i did with mysnapsonline.com and have 6 or 7 breakpoints.

User avatar
Pablo
 
Posts: 15940
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to get background to be responsive in Divider template?

Post by Pablo » Fri Apr 26, 2019 6:06 pm

Based on the HTML code, I cannot see what you have done exactly, so I can only guess. That is why it's always better/faster to provide a (stripped) copy of the project file.
Related FAQ: viewtopic.php?f=10&t=82134

Unfortunately, there are some things I do not have control cover like cover and fixed not working on some mobile devices, and that is why the software includes workarounds where possible.
Until now they have worked for other users, so I'm sure it can also work for you.

dnlyko
 
 
Posts: 34
Joined: Tue Mar 05, 2019 12:55 pm
Location: Canada

Re: How to get background to be responsive in Divider template?

Post by dnlyko » Fri Apr 26, 2019 6:09 pm

just use the template and add a picture as the page background and you will see the code

Post Reply