Page 1 of 1

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

Posted: Tue Jul 29, 2025 5:47 am
by 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?

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

Posted: Tue Jul 29, 2025 6:35 am
by 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.

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

Posted: Tue Jul 29, 2025 7:57 am
by GNP
Thanks! Which property should I be looking at within the breakpoint?

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

Posted: Tue Jul 29, 2025 8:13 am
by Pablo
The name of the Layout Grid property is 'Breakpoint'

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

Posted: Tue Jul 29, 2025 8:45 am
by 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.

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

Posted: Tue Jul 29, 2025 9:07 am
by Pablo
Maybe you have added fixed content to the grid?
It is difficult help you without seeing what you have done.

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

Posted: Tue Jul 29, 2025 9:14 am
by 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)"?

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

Posted: Tue Jul 29, 2025 11:24 am
by 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.

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

Posted: Tue Jul 29, 2025 12:03 pm
by GNP
Thanks for the code! That did it.

Thanks again.