How to stop PRODUCTS column squishing onto the side when there's no more collections to show

[lukafernada]

It seems there are fixed shapes for the columns, how do I make them stay in one place? Below is an example of my problem:

[Made4uo-Ribe]

Hi @lukafernada 

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media screen and (min-width: 750px) {
    .predictive-search__results-groups-wrapper .predictive-search__result-group:first-child {
        flex: unset;
    }
}

And Save.

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[lukafernada]

Thank you it does work, but it undoes the 'flex: 32%' I already coded for it

How can I keep this?

[Made4uo-Ribe · Accepted solution]

Oh, Check this one. I like to use grid that flex. 

div#predictive-search-results div#predictive-search-results-groups-wrapper {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
}

.predictive-search__results-groups-wrapper .predictive-search__result-group:first-child {
    grid-column: 2;
    grid-row: 1;
}

.predictive-search__results-groups-wrapper .predictive-search__result-group:last-child {
    grid-column: 1;
    grid-row: 1;
}

And Save.

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[lukafernada]

Your a genius, thank you