How To Center Products On A Collections Page? (Impulse Theme)

[Lami4]

Hi there,

I am using Impulse Theme and I have a sticker collection and it is only two 2 products and I am trying to center them on my collections page for mobile. I tried adjusting the settings to display but that didn’t help. Any suggestions? Thanks

Link to Website: https://ued3tor6qy9fdxrn-72462729509.shopifypreview.com

[irene-vintage]

Hello @Lami4 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.css file

Add this following code at the bottom of page

@media only screen and (max-width: 480px) {
  .collections-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .collections-grid .collection {
    flex-basis: 45%; /* Adjust this value to control the width of each collection */
  }
}

Save and preview

Hope this can help.

Ali Reviews team.

[Lami4]

Hello @irene-vintage

The code did not work. I placed it at the bottom of the file but nothing happened. Do you have any other suggestions? Thanks

[oscprofessional]

Hello @Lami4

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->product-grid-item.css>Add this code at the bottom.

@media only screen and (max-width: 768px){
.grid-overflow-wrapper .grid__item:first-child {
    margin: 0 auto;
    max-width: 100%;
}
.grid {
    margin-left: -54px;
}
}

[Lami4]

This worked except when you click on the product it also moved that page to the left. Is there code that can be added to fix it?