Long way to the footer

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
Post Reply
Provene
 
 
Posts: 11
Joined: Sun Sep 29, 2019 6:35 pm

Long way to the footer

Post by Provene »

I'm so close with this website and the last issue is just weird. Why are the pages so long? It looks ok in a web browser that you use in 'responsive' mode and make smaller or larger to check - but when actually viewed on a phone the footer is a looooong way from the text. It seems ok on a tablet. I'm using Google Chrome on a Google pixel to view and don't have any apple devices so can't see it 'live' on one of those.

Any ideas?

www.marketingconnections.biz/equinox

Files: https://1drv.ms/u/s!Ajq8DLQf9ED9kCylx_O ... E?e=jCpANH
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Long way to the footer

Post by Pablo »

Please the FAQ 'There is a large is empty space at the bottom or right side of my page'
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Long way to the footer

Post by crispy68 »

I looked at your page and i'm not seeing a long page. Can you post a picture of what you are seeing?

The issue you do have is that in your 2 breakpoints you have objects outside of the page width (boundary lines) which will cause horizontal scrollbars to appear.

In 750px BP:

Image

In 320px BP:

Image

All the text boxes, images, etc. need to be within the blue vertical dotted line representing the page width.

Also, I see your footer text is an image. why? Why not use a text box that can be used in each breakpoint rather than redundant images?

You are using an embedded page for the 'menu'. However, your embedded page does not have the same breakpoints as your page. Make sure they have the same breakpoints that way you can adjust the menu in each breakpoint on the menu page and it will look good in your other pages. Your css menu needs to be set to responsive for this to happen. Why not just use the same menu you have on the menu320 page?
Provene
 
 
Posts: 11
Joined: Sun Sep 29, 2019 6:35 pm

Re: Long way to the footer

Post by Provene »

Thank you for your help Crispy68 - I will look at that, I hadn't realised that it would cause a scroll to appear. In answer to your question about the text as an image - I was finding it hard to place the text precisely, so converted it to an image to make that bit easier. I also couldn't find out how to make the text box a dark grey with the white text on it despite trying for a while.

Pablo, thanks for the link - I had read that article and already changed the CSS visibilty property to display:none, but no improvement - hence my posting here to try and get an answer.

I will try adjusting the break points - thank you Crispy68. :)
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Long way to the footer

Post by crispy68 »

To create a text box like you want versus using an image do the following:

1. Insert a text box and type the text you want and adjust the color of the text.
2. Right click on the text object and choose Object Properties.
3. Click on the Style tab and set the background to Solid and choose the color you want.
4. Click on the Padding tab and add padding to the top, bottom, left and right to add space between the text and the edge.

That's it!
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

Re: Long way to the footer

Post by UncleEti1 »

Hello, I allow myself to take up this post, because I have the same difficulty. I am happy with my page in 320 px, the work on outflow-visibility with the layout-grids was, according to me, NASA level... but, on 2 iphones, 4s, 6 s, I have this disgracious tail, which is particularly annoying on an old 4s.
I went trough the tutorial, tried different things. Since I don't understant all of them (like =css visibility=none) I am not sure I did it perfect.
Here is the page :

http://www.khenpo.fr/bio_chap1-et-2.html

Thank you for your help.
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Long way to the footer

Post by Pablo »

- The page alignment is set to 'center in browser window'. This is incorrect.
- the page header and footer have a fixed layout and as far as I can tell you did not implement breakpiont to adjust the layout for smaller screens

Note: I cannot see your settings based on the HTML. if you need assistance then please share a demo project.
UncleEti1
 
 
Posts: 107
Joined: Sun Sep 10, 2017 7:44 am

Re: Long way to the footer

Post by UncleEti1 »

Thank you, in particular since you already gave me the first advice on "non aligned"page" and I again forgot it.
On the other end, I am surprised because precisely you corrected my first sample of master-page, et the one I used for this page is only a renamed clone. Header was floating but, true, not footer. ?! So I corrected it.

By respect to breakpoints, everything is in order ( I have 320, 768, 1024, and defaut 1600) and that was precisely my worry.
So, I am quite happy now. Thank you, really.
Post Reply