Turn off Sider left-menu from homepage?

Hi Oier,

You are using WP columns block, GP doesn't have any control over how it behaves.

I would recommend using GenerateBlocks plugin as the block editor, the Grid block would be what you are looking for:
https://wordpress.org/plugins/generateblocks/
https://docs.generateblocks.com/article/grid-overview/

In the newest version of GB, you can set flex basis (px) for the grid items instead of %.

Hope that's helpful.

I am actually using that. The GB grid is inside the WP column block (just 1 column) . I did that just because I wanted the grid to take 100% of the width of the content space. Didn't manage to do so otherwise, there probably is a better way to do so.
I can take the grid out of the column block, I actually created the grid outside, and then pasted it in. But I had the same problem when the grid was outside anyway and could not find a way to solve it.

Can you try set the grid item flex basis to 350px see if that's what you want?
https://www.screencast.com/t/myftJGC9N7w

Doesn't that just give the containers a fixed width?
I want them to change the width depending on the browser's width. Can I somehow make the grid change from 3 to 2 (and from 2 to 1) columns at a width of my choice? That would solve the problem. I would need it to change at a higher width than it does now.

Hi there,

the flex basis sets the 'ideal' width - but doesn't fix it.
If you made the settings for each column in desktop:

grow: 1
shrink: 0
basis: 350px

Then you will get 3 columns when there is enough room for 3 x 350px ( plus any gap ) - and when there isnt the grid will create new rows and force the grid columns to fill the space.

True, I was missing the grow/shrink part. Anyway, this doesn't work either as I get 2 cards in one row with 50% width each, and 1 card in the new row with 100% width.
I'd like all the cards to have the same size always.

this doesn’t work either as I get 2 cards in one row with 50% width each, and 1 card in the new row with 100% width.

Try set instead:

grow:0
shrink:1
basis: 350px

That's what I first tried, cards have a fixed 350px width for almost any screen size. Even when there are just 2 cards in a row and plenty of white space to fill they just have the fixed 350px width. Then when there is no place for 2 cards in the row one just jumps to the next row.
Also, when there is just 1 card in each row they have just 350px width even if they fill less than 60% of the whole row.

All right, then can you switch back to the initial settings with 33% width?

We would try to figure out a CSS solution to change the desktop/tablet breaking point then.

Done.
Perfect, thanks!
About that solution for the breaking point, would that affect only the grid, or the whole page (menus...)?

We can't change the site's breaking point, there's a lot of CSS already built in the theme, we can't override all of them.

What we can do is to try targeting this specific Grid :)

Let's add a custom CSS class to the Grid block, eg. custom_grid_breakpoint, then add this CSS:
How to add class to blocks: https://wordpress.com/support/adding-additional-css-classes-to-blocks/

@media (max-width: 1200px) and (min-width:768px) {
.gb-grid-wrapper.custom_grid_breakpoint > .gb-grid-column {
    width: 50%;
}
}

You can change the 1200px to the screen width that you want it to be 2 columns.

Let me know :)

Thanks Ying! That worked perfect!
Now I have another doubt about the primary navigation menu in the left.
The menu items are aligned in the center, but I'd like them to be aligned in the left, so that it looks like the menu widget below.
I tried many things but nothing worked for now.

You are welcome :) Try add this CSS:

@media (min-width: 950px) {
.site-header .main-navigation .main-nav > ul {
    align-items: flex-start;
}
.site-header .main-navigation .main-nav > ul > li > a {
    padding: 0;
}
}

And change this CSS:

.nav-float-right #site-navigation {
    margin-right: auto;
}

https://www.screencast.com/t/KLwg0BZjwZdl

To:

.nav-float-right #site-navigation {
    margin-right: auto;
    margin-left: 0;
}

Let me know :)

Solved! Thanks again.