1 page website - layer spacing.

[lilandy]

I am currently working on a site for the mother in law and she has decided to go with a one page layout, Exciting stuff for me having never done one before

So I have followed the tutorials to create a one page layout that works great except for one problem on iPhones (and presumably other small screen devices) I have the breakpoint set to 320 with the layer BG images set to full screen floating as per the tutorial.
I have added a additional 12 column flex grid to the background layer and changed the BG colour of that to use as a text background then added my text into that.

It looks great on any other resolution than the 320, But the problem is at 320 I have had to reduce the text size to stop the about us layer vanishing under the services layer.

It is uploaded to a temp link here at the moment:
http://asjtesting.rf.gd/
If you view at the 320 breakpoint you will see the 2 text boxes are very close together, I there a way to space out the layers a little or make it so they don't crash?

I know I could put another layer inbetween the 2 to space them out but I don't really want to do that.

Cheers.

[Pablo]

You can use margin to add spacing before and after (floating) objects.
You can access the margin properties via the arrange menu, the property inspector or by right clicking the object

[lilandy]

Thanks Pablo I will try that out.

[lilandy]

You can use margin to add spacing before and after (floating) objects.
You can access the margin properties via the arrange menu, the property inspector or by right clicking the object

Yeah that didn't work,

You can see the issue on my screen shot here:
https://drive.google.com/file/d/1yYPSnE ... sp=sharing

Its the same on the iPhone, The text is larger than the layer I think so its getting hidden under the next layer down.

So I either need to make the layer background float behind it when scrolling or make the text smaller for that breakpoint only.

I tried ticking the responsive font option but that didn't seem to do anything?

[Pablo]

Maybe this will be helpful?
http://wysiwygwebbuilder.com/responsive_text.html

Note I cannot access your screenshot, I need to login.

[crispy68]

I believe the issue you are seeing is due to the fact that your content is 'longer' in mobile layout than the full page background layer. Using a full page background layer is great on desktop as there is so much 'real estate' for content. The problem arises when you get down to mobile. The layer is only going to get as big as the screen. If your text, images, etc. take up more space, then they wont fit. You can set the text to responsive and change it in the breakpoint but you may get to a point to where the text is too small.

If there was a way to 'turn off' the full screen bg mode at a certain breakpoint and the floating layer would act like a normal floating layer where you could set the height to what you wanted, then it would work.

I don't know of a work around for this as I've wanted this type of functionality myself. I have found a couple of scripts that work but I have not implemented them.

[lilandy]

I believe the issue you are seeing is due to the fact that your content is 'longer' in mobile layout than the full page background layer. Using a full page background layer is great on desktop as there is so much 'real estate' for content. The problem arises when you get down to mobile. The layer is only going to get as big as the screen. If your text, images, etc. take up more space, then they wont fit. You can set the text to responsive and change it in the breakpoint but you may get to a point to where the text is too small.

If there was a way to 'turn off' the full screen bg mode at a certain breakpoint and the floating layer would act like a normal floating layer where you could set the height to what you wanted, then it would work.

I don't know of a work around for this as I've wanted this type of functionality myself. I have found a couple of scripts that work but I have not implemented them.

Agreed.

But now I know how to use the responsive text properly that should be fine.

I thought it would auto size lol