1 page website - layer spacing.

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
lilandy
 
 
Posts: 32
Joined: Wed Apr 29, 2020 9:29 am

1 page website - layer spacing.

Post by lilandy » Fri May 08, 2020 11:15 am

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.

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: 1 page website - layer spacing.

Post by Pablo » Fri May 08, 2020 11:22 am

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
 
 
Posts: 32
Joined: Wed Apr 29, 2020 9:29 am

Re: 1 page website - layer spacing.

Post by lilandy » Fri May 08, 2020 11:24 am

Thanks Pablo I will try that out.

lilandy
 
 
Posts: 32
Joined: Wed Apr 29, 2020 9:29 am

Re: 1 page website - layer spacing.

Post by lilandy » Fri May 08, 2020 11:50 am

Pablo wrote:
Fri May 08, 2020 11:22 am
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?

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: 1 page website - layer spacing.

Post by Pablo » Fri May 08, 2020 11:59 am

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

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

User avatar
crispy68
 
 
Posts: 1052
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: 1 page website - layer spacing.

Post by crispy68 » Fri May 08, 2020 12:11 pm

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
 
 
Posts: 32
Joined: Wed Apr 29, 2020 9:29 am

Re: 1 page website - layer spacing.

Post by lilandy » Fri May 08, 2020 12:54 pm

crispy68 wrote:
Fri May 08, 2020 12:11 pm
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

Post Reply