Spacing between objects in mobile view

[DreamCars-Rental]

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.

[Pablo]

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]

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.

[Pablo]

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]

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

[Pablo]

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]

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.

[Pablo]

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]

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

[DreamCars-Rental]

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

[Pablo]

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]

Thank !Now it works proprely.