Increase padding on sides of collection

[studioseductres]

hi I am wanting my products in each collection to appear exactly like this, with this spacing in between and on the sides.
this is the example: 
https://prod.net/collections/shop-all?srsltid=AfmBOoqNju_Hgtrs9Q19YuX37cJH_wK8WESwAv4Na_wzOHwjnCvbzw...

lease help and thankyou

My website is studio-seductress.com and password: yesyesyes

[LizHoang]

Hi @studioseductres 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

div#shopify-section-template--24119740629282__product-grid {
    padding: 0 50px !important;
}

Result: 

Best,

Liz 

[studioseductres]

Thank-you so much, that worked well. Unfortunatey the mobile view changed also. Is it possible to make mobile view like this?

[LizHoang]

Hi @studioseductres 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media (max-width: 768px) {
   div#shopify-section-template--24119740629282__product-grid {
     padding-left: 15px !important;
   }

   ul#product-grid {
     column-gap: 5px !important;
   }
}

Result: 

Best,

Liz

[studioseductres]

Unfortunately it did not change

[LizHoang]

Can you show an image of where the code is added?

[studioseductres]

 end of base code

[EBOOST]

Hi @studioseductres ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/base.css
3. Add code below to end of file

.collection.page-width {
	max-width: var(--page-width);
	margin: 0 auto;
	padding-left: 3rem;
    padding-right: 3rem;
    --grid-desktop-horizontal-spacing: 20px;
    --grid-desktop-vertical-spacing: 20px;
}

.collection.page-width #product-grid {
	gap: 20px!important;
}

.collection.page-width #product-grid .card__inner  {
	width: 100%!important;
}
@media screen and (min-width: 750px) {
	.collection.page-width {
		padding-left: 3.2rem;
		padding-right: 3.2rem;
	}
}
@media screen and (min-width: 990px) {
  .collection.page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

[Dan-From-Ryviu]

Hi @studioseductres 

You can do that by adding this code to base.css file 

@media (min-width: 750px) {
.collection.page-width {
    padding: 0 5rem !important;
}
}