DISPLAY ON WEB

All Quick 'n Easy Web Builder support issues that are not covered in the forums below.
dchaley369
Posts: 14
Joined: Wed May 27, 2015 4:28 pm

DISPLAY ON WEB

Post by dchaley369 » Mon Nov 05, 2018 5:54 pm

Hi guys, I can't figure this one out.
I have a default screen with 5 breakpoints.
1920 (default), 1280 (landscape), 1024(landscape), 414(portrait), 375(portrait), 320(portrait)
Everything works fine until I attempt 1024, the response snaps to 1920 instead.
What do I need to do to fix this.
I am testing in Safari, Chrome, Firefox, Opera, it does the same in all browsers.

Thanks, Chris
Link, www.guttertoolsinc.com

User avatar
Pablo
Site Admin
Posts: 3171
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: DISPLAY ON WEB

Post by Pablo » Mon Nov 05, 2018 6:12 pm

There is a scrollbar at the bottom of the page. This indicates that there are objects outside the viewport/page boundaries.

See the FAQ:
There is a large is empty space at the bottom (or right side) of my page.
http://www.quickandeasywebbuilder.com/f ... 10&t=43085

Unfortunately, there are too many objects on the page for me to figure out what you have done exactly. Otherwise I could have pointed you in the right direction, but it will most likely take me hours to find out what you have done based on the HTML code.
Are you aware that you can re-use elements in breakpoints?

dchaley369
Posts: 14
Joined: Wed May 27, 2015 4:28 pm

Re: DISPLAY ON WEB

Post by dchaley369 » Mon Nov 05, 2018 6:24 pm

Hi Pablo,

Thanks for the fast reply, I will find it.
Yes, I am aware of reusing elements on breakpoints, thanks again for your help.

Thanks again!

dchaley369
Posts: 14
Joined: Wed May 27, 2015 4:28 pm

Re: DISPLAY ON WEB

Post by dchaley369 » Mon Nov 05, 2018 8:14 pm

Pablo,
Is there anything else that could cause this?
I have moved and reduced all elements except for the hidden ones.

I can get it to 1024 but when it goes past or when I miss it snaps to 1920, very quickly, say if I tighten the window by 10 px's or so after 1024 design appears.
shouldn't it go to 440 instead of 1920?

What do you think?

Chris

User avatar
Pablo
Site Admin
Posts: 3171
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: DISPLAY ON WEB

Post by Pablo » Mon Nov 05, 2018 9:24 pm

Is there anything else that could cause this?
No, I am pretty sure this is related to elements outside the viewport.

I do not think it has anything to do with the breakpoints.
But you have a very complicated layout with many (duplicated) objects so you may be useful to clean it up so it will become easier to trace these type of errors.

dchaley369
Posts: 14
Joined: Wed May 27, 2015 4:28 pm

Re: DISPLAY ON WEB

Post by dchaley369 » Tue Nov 06, 2018 3:14 pm

Pablo, as always your help is invaluable.

I know I am going to learn from this.
There are 4 references to "Viewport" in the help guide.
One which is "The breakpoint specifies at which viewport width when the layout will be switched to mobile/stacked layout."

I think it would be a great help to me to know what is the difference between them.
Also, you said that my website has "with many (duplicated) objects" which I agree with. So, how do I prevent this? Do I use the clone and hide option?

Many Thanks
Last edited by dchaley369 on Tue Nov 06, 2018 3:24 pm, edited 1 time in total.

dchaley369
Posts: 14
Joined: Wed May 27, 2015 4:28 pm

Re: DISPLAY ON WEB

Post by dchaley369 » Tue Nov 06, 2018 3:21 pm

The help guide states, "If you need different sizes in breakpoints then you will need to create a copy of the object. You can also use quickly clone and hide the original object with the 'Clone and Hide' option in the object's context menu."

So, does that mean if I take for example the large green arrow, set it to CSS3 then I can change the size in each breakpoint and the same with my Logo?
UPDATE: On the 1920 layout I changed the settings of the large green arrow to CSS3 instead of image and uploaded it. I opened the website and the arrow shape was changed to a rectangle shape instead, what gives?

One more ? My PayPal buttons, I can clone and hide them and move to another location in a different breakpoint?
By the way, thanks for the PayPal implementation, what a great help!

User avatar
Pablo
Site Admin
Posts: 3171
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: DISPLAY ON WEB

Post by Pablo » Tue Nov 06, 2018 5:45 pm

A 'viewport' is the visible area of the browser window. For mobile devices, the viewport has a fixed size. On the desktop, if you make the browser window smaller then the viewport will become smaller.
A 'breakpoint' is the width where the browser selects a different layout.

In the current version, most objects are responsive, which means that they can have different sizes in breakpoints.

See also the FAQ: Which objects are not responsive?
http://www.quickandeasywebbuilder.com/f ... 10&t=43085
UPDATE: On the 1920 layout I changed the settings of the large green arrow to CSS3 instead of image and uploaded it. I opened the website and the arrow shape was changed to a rectangle shape instead, what gives?
As mentioned in the help, CSS only supports rectangle, ellipse and rounded rect.
One more ? My PayPal buttons, I can clone and hide them and move to another location in a different breakpoint?
Yes, but if possible I would recommend to reuse the same object.

dchaley369
Posts: 14
Joined: Wed May 27, 2015 4:28 pm

Re: DISPLAY ON WEB

Post by dchaley369 » Wed Nov 07, 2018 5:51 pm

Thank you again, Pablo, as always you are most helpful!

dchaley369
Posts: 14
Joined: Wed May 27, 2015 4:28 pm

Re: DISPLAY ON WEB

Post by dchaley369 » Wed Nov 07, 2018 6:22 pm

Pablo,
As stated yesterday.
I have a default screen with 5 breakpoints.
1920 (default), 1280 (landscape), 1024(landscape), 414(portrait), 375(portrait), 320(portrait)
Everything works fine until I attempt 1024, the response snaps to 1920 instead.
After going back and checking (per your good suggestion) if anything was outside of the viewport I found nothing.

I changed the page settings to automatic size and I am wondering if has something to do with the issue.
1920 sets the page length to 6700 good.
1208 sets the page length to 8000 but it could be 7250
1024 sets the page length to 10225 but it could be 8700 (is this an issue?)
414 sets the page length to 10500 good
375 sets the page length to 10300 good
320 sets the page length to 10150 good

mexman
Posts: 610
Joined: Mon Feb 11, 2013 11:33 am
Location: Puebla/Mexico

Re: DISPLAY ON WEB

Post by mexman » Wed Nov 07, 2018 8:21 pm

Hi Dechaley:
You web design looks ....hmm..... not very attractive.
Maybe this is a bit cultural as well, but I would definitively stay on your web site.
Without looking into the generated code (and if Pablo says there might be some element off the area", please translate that to "There ARE elements outside...") I really recommend you to search for "Rules for Typography" and "Rules of good Web Design.
I would strongly recommend to use Responsive Web Design provided by QnEWB instead of so many Breakpoints. This would require to use max. 3 breakpoints.
My most important tip: Let others evaluate the attractiveness of your page. Young people, old people, potential customers etc. And review pages of other suppliers of specialized software:
https://www.bellafsm.com/field-service- ... -software/
http://www.insightdirect.com/gutter-service-software
https://www.marketsharp.com/industries/ ... ntractors/
(the first and last one are completely responsive)
SIMPLER = BETTER, less font types and sizes, clearer fotos, less icons. Remember: Search machines analyze your page contents and your ranking is lower if your page does not fulfill clear design rules.

Regards
Michael
QnEWB V6.x - Ubuntu 18.04

User avatar
Pablo
Site Admin
Posts: 3171
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: DISPLAY ON WEB

Post by Pablo » Wed Nov 07, 2018 9:15 pm

It is very difficult for me to tell which objects are 'accidentally' outside the viewport or if they were placed there intentionally.
For example, in my opinion objects Text361, Text362, Text363, Text2 and Text356 are outside the page boundaries, but you may have place them there on purpose.

As I said before, there are too many objects on the page to make any sense from it based on the HTML code only.

dchaley369
Posts: 14
Joined: Wed May 27, 2015 4:28 pm

Re: DISPLAY ON WEB

Post by dchaley369 » Wed Nov 07, 2018 9:46 pm

Hi Michael,
Thank you for your input, I think. I am currently reworking the website so that is why you see what you see on the opening first half.
I have searched in the off area but cannot seem to find the culprit that should be there.
So, let me ask, can it be a hidden item? Just wondering.

Also, just a few suggestions for you, I know my customer base and as I have been in this particular industry for many years. My customer base is not tech savvy at all. So, a website that is like say Apples, which is cultural doesn't work to well with them. So, it must be straight forward and I have got to put as much information in front of them as I can on first entry as they are not prone to click on another page. Most of my customer base are tradesmen who have gotten into the business as a last ditch effort in the construction trades and the sad fact is that 65% will be gone in 2 years or less. Most of them at best read at a 6th grade level though they are hard working in every capacity.

Most do not own a computer or a smartphone either. Sounds kinda funny for a guy trying to sell them software huh?

Anyway fonts are an issue as I have noticed no matter what I use, which is usually Arial and Arial Black, are changed when I look a the site live. Why is that or better put, how can I fix it. I have downloaded Google web fonts and they don't seem to hold and are often changed to others as well so there must be something that I am doing wrong. Any suggestions would be very much appreciated.

As far as my lack of design experience you may be right but just so you know I have been a subscriber to that industry for some time, here is a link that you might like to check out, http://www.bamagazine.com. I have been in the printing business in another life time as well. So, though I appreciate your suggestions, know that you are not talk to a design idiot, I may not understand html but that is why I bought quickandeasywebbuilder after I literally through away Dreamweaver!

I have several websites as well and my approach to each one is based on the type of customers that I cater to. None of which are your typical "cultural types".

Now, what you do need to know is that each link you have sent me are not and I repeat are not true gutter software companies. Each one of these are plug and play software for any industry in the trades. They are neither familiar with nor know the Gutter industry. They do very little if any sales in the gutter industry and wouldn't really know a gutter from a Y funnel or conductor just as you wouldn't.

Respectfully

dchaley369
Posts: 14
Joined: Wed May 27, 2015 4:28 pm

Re: DISPLAY ON WEB

Post by dchaley369 » Wed Nov 07, 2018 9:49 pm

Pablo, thanks so much again I will check into the text that you have suggested.
I must ask because I have no idea, is it possible that a hidden object may be the culprit?
Just asking.

Thanks

User avatar
Pablo
Site Admin
Posts: 3171
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: DISPLAY ON WEB

Post by Pablo » Thu Nov 08, 2018 7:01 am

I must ask because I have no idea, is it possible that a hidden object may be the culprit
Yes, hidden objects also affect the page size unless you set the CSS visibility property to 'display' (in Preferences->HTML->CSS)

Post Reply