How can I expand a multicolumn to the full page width on desktop?

Store Design
1

Hello all, I am wanting to make this collection list the entire width of the page on desktop, is there a way to enlarge the whole entire multicolumn?

Thanks

Screenshot 2023-02-25 232623.png
Screenshot 2023-02-25 232623.png400×140 28.5 KB

2

Yes, you can make the collection list take up the full width of the page on desktop by adding some CSS. Here’s an example of how you can do this:

You can add this CSS to your theme’s stylesheet or to the “Additional CSS” section in the Shopify theme editor. This code will make the collection list display as three columns on desktop, with each column taking up one-third of the available width. The negative margin on the collection list will remove any default spacing and allow the columns to align flush with the edges of the page.

Adjust the flex-basis property to adjust the number of columns you want to display. For example, if you want to display four columns, set flex-basis to calc(100% / 4).

@media only screen and (min-width: 768px) {
  .collection-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* negative margin to remove default spacing */
  }
  .collection-item {
    flex-basis: calc(100% / 3); /* set column width to one-third */
    padding: 0 15px; /* add padding to each column */
  }
}
3

Hi @2mn ,

Could you please share URL and your store password? So that we can help you.
Thank you.

4

Hi @2mn ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link.section-template--17315664953645__22cd32a2-27b7-48f8-910c-5a827821f2ec-padding {
    max-width: initial !important;
}

Hope my answer will help you.

Best regards,

Victor | PageFly