Space at End of Page

Hello!

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.

Is anyone else experiencing this?

In the meantime I’ll send the project to Duncan.

1 Like

Hi Jazzbird,

I am asking these questions as a process of elimination:

  • Is is happening on all device layouts or just one, or some?
  • Is it happening on all pages, or just some?

Chris

1 Like

I’ve been fighting with this too. When I add anything to one device it lengthens the other device page even that element is not shown on that device.

1 Like

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.

2 Likes

Are Layout Blocks involved?
They had sometimes this effect.

Mr. F.

1 Like

Hello Chris!

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.

Happening to all pages.

Yes, layout blocks are involved. I started redesigning to take advantage of them.

KimOliver,

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

1 Like

Hi @jazzbird.

You can read more about this right here.

It seems that V 4.0.8 has not been released yet. Maybe we see some fixes related to layout blocks.

Mr. F.

Now Duncan has one more user with this issue. I thought it would only be me :face_with_spiral_eyes:

2 Likes

Hi jazzbird! :slightly_smiling_face:

Next questions:

  • Is it possible that there are items on your mobile layouts that are hidden on the desktop layout, and/or Shared on all pages?
  • If you double click the page height tool on a desktop layout, does it make the page height snap back to the bottom most item?

See also my response/suggestion to KimOliver.

1 Like

@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.

1 Like

Great discussion and solutions here! :slight_smile:

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.

4 Likes

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.

10 Likes

Food for thought! Many thanks for sharing.

4 Likes

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)

1 Like

Hello Selcuk,
Thank you! A good tip to see both designs at once. One can always learn from other users! Like this forum.

2 Likes

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

1 Like