*** SOLVED *** Rendering inconsistent page header vs different layers

Issues related to previewing and publishing your web site.
User avatar
Magical
 
 
Posts: 103
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

*** SOLVED *** Rendering inconsistent page header vs different layers

Post by Magical » Thu Dec 14, 2017 5:46 pm

Greetings,

I recently licensed wysiwyg, and I am amazed at the speed with which I was able to convert an old dated website and give it a new look. Yes I did use a template, I do that most of the time, but all functionality is truly wysiwyg. One issue i cannot resolve, probably because I did not see it before. My site is at www.finzcraft.com you can view in Chrome (not yet tested with other browsers). It looks really good, but when i preview the same on my mobile phone thats where inconsistencies show up. I have not used any breakpoints, I am just getting started. Below is what it looks like on my mobile phone (SAMSUNG Glasxy S7).

Image

https://drive.google.com/file/d/1zj3gWi ... sp=sharing

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

Re: Rendering inconsistent page header vs different layers

Post by Pablo » Thu Dec 14, 2017 5:50 pm

You will need to implement breakpoints (like in the original template) to optimize the layout for smaller viewports.

User avatar
Magical
 
 
Posts: 103
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Rendering inconsistent page header vs different layers

Post by Magical » Thu Dec 14, 2017 6:01 pm

There are no breakpoints in the original template. I also took the original without any modification and viewed on the mobile. Same behavior.

My point is that the clipping should be consistent, the entire page should clip and have consistent right edge. But it is not, the middle layer renders correctly. The others do not. I cannot figure out what the difference is.

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

Re: Rendering inconsistent page header vs different layers

Post by Pablo » Thu Dec 14, 2017 7:13 pm

There are no breakpoints in the original template. I also took the original without any modification and viewed on the mobile. Same behavior.
The original template has a breakpoint at 480 for smaller screens:
http://www.wysiwygwebbuilder.com/suppor ... rtist.html
My point is that the clipping should be consistent, the entire page should clip and have consistent right edge.
Correct, because this template uses fixed page layout, so it is not flexible. Therefor it needs breakpoints.

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=76722

User avatar
Magical
 
 
Posts: 103
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Rendering inconsistent page header vs different layers

Post by Magical » Fri Dec 15, 2017 3:14 am

Cool,

I redid the index page in 320 width, works great on cell phones, but messed up on iPad and tablets. I think I probably need 2 more breakpoints to cover iPad, tablets and tabs.

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

Re: Rendering inconsistent page header vs different layers

Post by Pablo » Fri Dec 15, 2017 7:08 am

In the original templates I have used a 480 breakpoint. This seems to work well on tablets.

User avatar
Magical
 
 
Posts: 103
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Rendering inconsistent page header vs different layers

Post by Magical » Fri Dec 15, 2017 12:10 pm

I used 320.

One more question on the same subject, on my PC the site appears fine when I see it in a maximized browser window, but when i start to shrink the window by about 1/3 the site switches to the smaller version. How can I prevent that? I do not see this behavior on other sites.

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

Re: Rendering inconsistent page header vs different layers

Post by Pablo » Fri Dec 15, 2017 1:37 pm

but when i start to shrink the window by about 1/3 the site switches to the smaller version. How can I prevent that? I do not see this behavior on other sites.
This is normal/behavior, you cannot prevent this because this is how responsive web design works.

User avatar
Magical
 
 
Posts: 103
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Rendering inconsistent page header vs different layers

Post by Magical » Sat Dec 16, 2017 1:11 am

Thank you for your assistance, I understand it better. I am already have a 1200 and 320. Going to create a 480 and 720. I will eventually convert 1200 to 1024 and that should take care of most of view port sizes.

For some odd reason the navigation (bookmarks on the first page) stopped working on my Samsung Galaxy s7. It only scrolls down about 1/4th of the page, no I matter which one I click they all go to the same spot; I checked the references and they are correct. Its working correctly on the desktop.

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

Re: Rendering inconsistent page header vs different layers

Post by Pablo » Sat Dec 16, 2017 7:56 am

Bookmarks is a standard HTML feature. If it does not work then either you have implemented it wrong or the problem is in the Samsung Galaxy s7 browser.
I do not have a Samsung Galaxy s7 so I cannot verify this for you.

The best way to test this is to remove all other non-relevant code from the page and try if it works then.

User avatar
BaconFries
 
 
Posts: 4108
Joined: Thu Aug 16, 2007 7:32 pm

Re: Rendering inconsistent page header vs different layers

Post by BaconFries » Sat Dec 16, 2017 4:35 pm

If you care to add a working url and I can test for you on my android phone. Note I cannot test the .wbs as on vacation and do not have access to PC. Note I am currently on vacation/holiday but will look.

User avatar
crispy68
 
 
Posts: 298
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Rendering inconsistent page header vs different layers

Post by crispy68 » Sat Dec 16, 2017 5:33 pm

I tested on my Samsung S7 and the navigation bookmarks work fine. What I did notice is I can zoom out on the page and there is a big white space on the right. Either you have objects outside of the boundaries of the BP's or i'm seeing the 1200px layout since the S7 has a viewport of 360px.

User avatar
Magical
 
 
Posts: 103
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Rendering inconsistent page header vs different layers

Post by Magical » Sun Dec 17, 2017 1:01 am

Thanks! I downloaded firefox on my S7 and that works as expected. In the stock chrome browser the bookmarks only work when I am on another page and click it to get back on the index page. If I am already on the index page and I click contact on top it should scroll down to the contact layout. It does not it only makes to the top of the "about" layout.

I also noticed that I am able to go right and even though the layout page width and break point is set at 320 I see another screen that is blank. There should be nothing there.

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

Re: Rendering inconsistent page header vs different layers

Post by Pablo » Sun Dec 17, 2017 7:18 am

I also noticed that I am able to go right and even though the layout page width and break point is set at 320 I see another screen that is blank. There should be nothing there.
To be able to help you with this I need to see what you have done.
Please always include the URL of the page and described the exact steps to reproduce this behavior,.

User avatar
Magical
 
 
Posts: 103
Joined: Thu Dec 14, 2017 5:08 pm
Contact:

Re: Rendering inconsistent page header vs different layers

Post by Magical » Sun Dec 17, 2017 12:51 pm


Post Reply

Who is online

Users browsing this forum: No registered users and 7 guests