Viewing Header height and page length
Header height and page length
|
User: Brian T. 2 years ago
|
|
|
Consider a one page website with 2 breakpoints - A and B. Site at breakpoint A has a header object 200px tall, so I’d like page content to follow starting at approx 300px from the top - 100px below the header. The same site at breakpoint B now has its header content 500px tall. I’d like the page content to start at approx 550 ~ 600px from the top. This doesn’t happen though - header content at breakpoint B forces page height on both breakpoints to start 500px from the top. The page viewed at width of breakpoint A therefore has a 300px gap between the bottom of the header content (200px) and the start of page content at 500px. Header height at any breakpoint is governed by the tallest header and consequently the start of page content at any other breakpoint will have an uncontrolled gap between header and page content. Similarly, it would seem that the placement of the page footer is governed by the bottom of the lowest item on the page at any given breakpoint. This leaves a large gap between the same item on different breakpoints and the footer. Surely this isn’t standard Everweb behaviour? How do I get my page content to follow closely below the header at any given breakpoint and the footer to closely follow the last item on the page at any given breakpoint? |
|
|
User: EverWeb Support 2 years ago
|
|
|
Hi Brian, Thank you for reaching us. Do you use Master pages in EverWeb? Please, note that the height of header and footer that you set up in page settings are set to minimum value, so if you add any object larger than that number, the header/footer will adjust to its height. If you want to add an object to the header that is smaller than a minimum value set up in page settings, you should add that object to the bottom of the header and vice versa with the footer, you should add the object to the top of the footer. Answering your questions: Site at breakpoint A has a header object 200px tall, so I’d like page content to follow starting at approx 300px from the top - 100px below the header. The same site at breakpoint B now has its header content 500px tall. I’d like the page content to start at approx 550 ~ 600px from the top. You should add an empty textbox with 100px height to the bottom of the header, and it will push it below the object that you placed there. This way, there will be a 100px gap between the header and the object that you place in the body of the page. To avoid an extra gap for pages with different headers, you should use 2 separate Master pages. If you have any further questions, please feel free to create a ticket with us. ------------------------------- EverWeb Customer Support Submit Tickets or Learn More |
|
|
User: Brian T. 2 years ago
|
|
|
Thank you for your quick reply. In this instance there is no Master Page - however, the issue is the same on both Master and Regular pages. I've attached a couple of images that make it clearer. |
|
|
User: Brian T. 2 years ago
|
|
|
So it looks like the photos I attached don't show here. Let me simplify the problem, step-by-step… Open a new Everweb project, using a blank, centred layout. Leave all page settings at default. Menu > Window > Show Layout, Show Rulers, Show Breakpoints & Show Hidden Objects. On the Desktop (991) breakpoint (Breakpoint A) add an item to the header, 200px high, width is irrelevant and call this Item 1. Add another item (size is irrelevant) to the page and call this Item 2 - it can be placed up as far as the base of the footer at 200px from the top. Select both items and, using the Metrics Inspector, have them show only on this 1 breakpoint. Select another breakpoint (Mobile 575, for example which I’ll call Breakpoint B), and as before, add 2 more shapes - one in the header with the other on the page. Make the item in the header 400px tall, width is irrelevant and call this Item 3. While dragging the base of this item down to 400px, observe how the position of the hidden object (Item 2) in Breakpoint A is pushed down the page. The other item on the page (Item 4) can of course now only be placed as high as 400px, because anything less than this is in the header. Use the Metrics Inspector to have Items 3 & 4 show only on this breakpoint (Breakpoint B). Breakpoint B layout is fine, but I now have a large gap in Breakpoint A between Items 1 and 2 caused by the enlarged header in another breakpoint, even though those items are hidden. Maybe this image will help: https://www.dropbox.com/s/2mr684b2d49kjzk/Head.jpg?dl=0 (For clarity, none of the objects in this picture have been hidden) |
|
| Post Reply |
| You must login or signup to post. |