Spacing between objects in mobile view

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
DreamCars-Rental
 
 
Posts: 72
Joined: Thu Sep 19, 2013 8:41 am

Spacing between objects in mobile view

Post by DreamCars-Rental » Sat Nov 17, 2018 12:43 am

I am very new to discover this great Layout Grid feature and got stucked with a little problem. I've read twice all the tutos and stuff but do not find how to get that sorted.

When the browser windows is resized down to the 480px size, at which the masterframe header layout grid change from normal view to the mobile view, the hamburger menu is placed below the logo. This is what is expected but I would like to have more space between the logo and the menu.

I've tried almost everything. Changing the menu place in the layout grid, adding column, changing column size, adding padding to the menu column,... and so on. Some change seems to be visible but in editing mode but in preview there is no change. And sometime in I change something in a breackpoint the change is done in the default view too :-(

https://decouvreur-de-tresors.com

Any idea ?

Other problem, if I add breackpoints to the index page, then the text at the center of the page get much wider as soon as the browser windows is downsized a little bit and the hamburger menu get cut in half. This is so terrible I could not let the breakpoints for the moment.

Thanks for any support.

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

Re: Spacing between objects in mobile view

Post by Pablo » Sat Nov 17, 2018 8:05 am

You can add spacing between objects with margins.

As always, to be able to help you I need the (stripped) project file to see what you have done.
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

DreamCars-Rental
 
 
Posts: 72
Joined: Thu Sep 19, 2013 8:41 am

Re: Spacing between objects in mobile view

Post by DreamCars-Rental » Sat Nov 17, 2018 1:22 pm

Here it is:
https://decouvreur-de-tresors.com/TresorStripped.wbs

and the images:
https://decouvreur-de-tresors.com/TresorBackground.jpg
https://decouvreur-de-tresors.com/Decou ... Tresor.png

In the mobile view, neither the empty row between the logo and the menu visible in the layout grid, nor the top padding added to the menu are effectively adding some more space between those two elements.

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

Re: Spacing between objects in mobile view

Post by Pablo » Sat Nov 17, 2018 1:37 pm

Thanks for sharing the project.
However, which "empty row" are you referring to?
Where exactly on the page do I need to look?

Also, the index page does not have the same breakpoints as the master page, so there will be undefined behavior for styles.

DreamCars-Rental
 
 
Posts: 72
Joined: Thu Sep 19, 2013 8:41 am

Re: Spacing between objects in mobile view

Post by DreamCars-Rental » Sat Nov 17, 2018 8:12 pm

Thanks for your so fast reply.

In the project, through one layout grid empty line (empty column in vertical mobile mode) AND some padding, I've put lot of space between the logo and the menu.
https://decouvreur-de-tresors.com/largeSpace.JPG

But in the reality of the published page this space is not present. And it doesn't matter how much padding I add to the menu "top padding" in this particular view, the padding in the reality does not change at all.
https://decouvreur-de-tresors.com/SmallSpace.JPG

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

Re: Spacing between objects in mobile view

Post by Pablo » Sat Nov 17, 2018 9:45 pm

An empty grid row doesn't have a height. The height of a grid (or any other floating container) is determined by its content, so if there is no content then the height will be zero.
The reason why the row has height during design time is because otherwise you would not be able to drag any objects in it.

DreamCars-Rental
 
 
Posts: 72
Joined: Thu Sep 19, 2013 8:41 am

Re: Spacing between objects in mobile view

Post by DreamCars-Rental » Sat Nov 17, 2018 10:14 pm

Ok, very clear, thanks.

Now what about the padding ? Why it is not taken into account for that element ? In fact the "top padding amount" that I try to set in the "hamburger menu" column of the layout grid (in the mobile view) is not even memorised. For instance if I set a top padding of 40 I can view a nice result in WWB but as soon as I publish it the padding of this particular element comes back to 20 which is the padding setting in the default view.

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

Re: Spacing between objects in mobile view

Post by Pablo » Sun Nov 18, 2018 8:31 am

The padding seems to work correct.

However, as previously mentioned: the index page does not have the same breakpoints as the master page. So, responsive styles will not be taken into account.

DreamCars-Rental
 
 
Posts: 72
Joined: Thu Sep 19, 2013 8:41 am

Re: Spacing between objects in mobile view

Post by DreamCars-Rental » Sun Nov 18, 2018 8:01 pm

Do you mean the layout grid itself cannot work without breakpoints ?

DreamCars-Rental
 
 
Posts: 72
Joined: Thu Sep 19, 2013 8:41 am

Re: Spacing between objects in mobile view

Post by DreamCars-Rental » Sun Nov 18, 2018 8:46 pm

Anyway, now I've added the breakpoints to the index page. And I've taken care to have the exact same breakpoints as the masterpage does. But it works half as expected. The masterpage elements, which are only the logo and hamburger menu, switch to the breakpoint view when expected, but the pages elements they switch to the breakpoint view as soon as the windows size is reduced a little bit. Way too soon.

I don't understand this because all the layouts grids have the breakpoint settings to the right number Ithink.

Obviously there is something I didn't get yet...

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

Re: Spacing between objects in mobile view

Post by Pablo » Sun Nov 18, 2018 9:12 pm

Do you mean the layout grid itself cannot work without breakpoints ?
You have used a master page. If you add breakpoints to the master page, then the same breakpoint should be added to the content page. See the FAQ.
but the pages elements they switch to the breakpoint view as soon as the windows size is reduced a little bit. Way too soon
Please read 'When do I use 'Include min-width in CSS3 media queries' in the FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817

DreamCars-Rental
 
 
Posts: 72
Joined: Thu Sep 19, 2013 8:41 am

Re: Spacing between objects in mobile view

Post by DreamCars-Rental » Tue Nov 20, 2018 10:57 pm

Thank !Now it works proprely.

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests