Two column on mobile product page only? Dont want it on every single page

I want to only have one page styled with two column but, the code I have applies the style change to all product pages. Is there a way to tweak the code to only apply the change to one page?

Thanks!

@ArtLover777 Would it be possible to share your site URL along with the code you applied to display two columns? 

@Lesum

Sure!

Artby-katya.com is the site and the code I used is below. I removed the code so right now, the website is still one column.

@media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item { width: 48%;
}
}

Hey @ArtLover777! Sorry I didnt get to your youtube comment yet - I've got a lot to catch up on from taking Sunday off 😅 Anyhoo, to add code to a single page you'll need to use page header code injection for the storefront.

Click on the gear icon to access the store settings, then select advanced, then page header code injection.

Paste my code there between two style brackets so the browser knows it's CSS, like this:

<style>
@media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item { width: 48%;
}
}
</style>

@inside_the_square I feel so seen! Definitely take your days off from being a coding superhero but thank you soooooo much for helping me out and taking the time to respond. The code worked beautifully and the website looks amazing, I cant thank you enough!

hey @inside_the_square

Hope all is well! I seem to be having some issues with this again..Initially the code was working but now it seems to be coming up as one column on the left side only. Do you know if something may have changed?

2 hours ago, ArtLover777 said:

it seems to be coming up as one column on the left side only. Do you know if something may have changed?

@ArtLover777  On Squarespace 7.1, you no longer need code because it is now a built-in feature. Please see my recent post here:

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 thank you for the quick reply and insight! I removed the code and changed the layout to 2 columns, however, the style was applied to all the pages. Is there a way to only apply to certain pages and keep the one column design on others?

8 hours ago, ArtLover777 said:

Is there a way to only apply to certain pages and keep the one column design on others?

Sorry, I missed your point in the earlier posts about wanting it to affect just one of your Product Pages.

In that case, you'll want to set the built-in feature to a single column and then use this (newer) code (added to the page header injection) to show two columns on this page:

<style>
  /* Two columns on PLP */
  @media screen and (max-width: 767px) {
    .products.collection-content-wrapper .list-grid {
          grid-template-columns: repeat(2,minmax(0,1fr));
    }
  }
</style>

Did this help? Please give feedback by clicking an icon below  ⬇️