How do I have layout grid columns side by side in mobile breakpoint?

[GNP]

Whenever I insert a layout grid with 2 or more columns, it's normal on desktop, but the columns always stack up vertically on a mobile breakpoint.

Is there a way to have the columns in a layout grid side by side even in a mobile breakpoint?

[Pablo]

You can control this via the 'breakpoint' property of the grid. For example, if you set this to 0, then it will never switch to rows.

[GNP]

Thanks! Which property should I be looking at within the breakpoint?

[Pablo]

The name of the Layout Grid property is 'Breakpoint'

[GNP]

Hmm....it still doesn't look the way I want it to look, in fact when i change to mobile view, it's all jumbled up and not neatly side by side.

[Pablo]

Maybe you have added fixed content to the grid?
It is difficult help you without seeing what you have done.

[GNP]

here's the link to the working file:

https://docs.google.com/document/d/1H5K ... ue&sd=true

I'm just trying to have a basic web company title at the top left, with the menu on the right. It works ok on desktop.

But I also want the responsive menu to be in the same top right position when in mobile view. Instead, it's all jumbled up below the company title in mobile view.

Isn't there an easier way since many websites also use similar styles of "COMPANY NAME (top left) then MENU (top right)"?

[Pablo]

The problem is related to the 100vh of the second layout grid. This affects the 'wrapping' behavior of the first grid.

You can prevent the automatic wrapping by adding this code to page HTML

Code: Select all

<style>
#LayoutGrid1
{
    flex-wrap: nowrap !important;  
}
</style>

The drop down menu has a built-in logo option.

[GNP]

Thanks for the code! That did it.

Thanks again.