I am finding that I’m getting huge gaps again at the end of each page. I shorten it and save the file but when I go back, it’s been lengthened again. Very frustrating.
One idea from my own experience: When adding and placing elements on one page first to the mobile device layout, those elements will be automatically added to the same “page” of the other, larger device layouts, somewhere similar on the canvas, but in much bigger size. Unless the relevant elements are not “Show[n] on all devices” it happens only on one page. Those elements might cause those gaps and are hard to identify when hidden on a device (by deselecting “show on this device”). They might be identified by selecting “Show hidden elements”. Move and resize hidden elements on the device layout.
I started working on the mobile layout some weeks ago but had to take a longish break. When I went back into the project this evening, and went to the wide desktop layout, that’s when I started encountering the long gaps at the end of all the pages. Then after I’ve fixed them, if I make any further amendments to the same device layout, it lengthens all the pages again.
Due to the characteristics of visual websites builders (aka you can place items anywhere you want on the canvas) it’s best to place items on the desktop layouts first.
The reason for this is that a mobile device layout will (in nearly all cases) end up with a much taller vertical height than the desktop.
When you place an item on the canvas in a mobile layout first, the item will automatically be placed at the same vertical height on a desktop layout. This, therefore, causes the desktop layout height to expand accordingly.
If you have created a footer (a group of items set to Follow footer) set to Show on all pages, or Show on all pages in a section, the item placed on the mobile layout will cause the desktop layout height to expand, and in some cases cause the other pages to follow accordingly, due to the footer being set to share on all pages, or pages in a section.
This is just one of many scenarios that are possible due to the many ways is which you can add content that interacts with other items, on multiple device types, and multiple pages, at the same time.
This answer is in the context of not using layout blocks, but as Mr Fozzie states, layout blocks can cause a similar effect in some cases.
Chris
@Chris Thanks for your thoughts and explanation. I had figured that out last year by myself in an annoying process when building my own website with individual headers and footers for each of the three device layouts. Visible tiny images of arrows (mobile device layout header) mutated to (invisble, because hidden) giant images of arrows (desktop layout header) that caused irritating gaps. Solved it with perseverance. For intended effects I had to discover some characteristics of Sparkle that yet cannot be found in the documentation. I really appreciate this community knowledge exchange with hundreds of smart hints and solution options.
For me the workflow is very important in creating a website in Sparkle. I start with a sketch as a rough outline and then proceed to build it out on the 960 device. Once done I introduce the 320 device and do the work needed to lay it out correctly including font resizing.
If I want to introduce elements in mobile (but not on desktop) I do the following…
introduce the element high up in the 320 device (near the hero section)
go across to the 960 checking where it is and then moving it to where I want it in the 960 device and then hide it
go back to 320 and place the element where it is needed
As @Chris mentioned placing an element in mobile (and most people would place it where they want it), and say you place it near the footer, then on the 960 device that element would be way beyond the 960 footer and therefore your page will lengthen.
I have a slightly different way of working.
For live preview, I open 2 windows in Safari, one to desktop size and the other to mobile width.
While working, I can see how it looks on both desktop and mobile at the same time, and I can intervene instantly.
Me too. Never used to happen until recently, but now I have to go back over every page and chase the disappearing footer back into view, sometimes from several floors below the office, that far.
There appear to be some helpful workflows on this thread, but we never used to have to do this - it’s a recent problem. (on 4.0.7)
I am new here, but I seem to have the same issue and if I am dissecting it correctly it is stemming from the cell phone blog index page. But that may not be right, I ran into a helluva issue with the pagination block the other day