How can I reduce padding of product items on a mobile collection page?

Store Design
1

I want to reduce/remove the padding of product items from my collection page for in mobile version.
Please help me with this.
Link - https://theurbanroute.com/collections/cosmic-anime
Attaching screenshot for reference.

ttttttttttttttt.png
ttttttttttttttt.png279×520 85.1 KB

2

Hi @AamirAsad
Update the below CSS in theme.css

Find .productitem–info

Replace
.productitem--info {
  position: relative;
  z-index: 100;
  background-color: #fff;
}
With

.productitem--info {
  position: relative;
  z-index: 100;
  background-color: #fff;
  padding: .6875rem .6875rem 0rem .6875rem;
}

Find .productitem–actions

Replace
@media screen and (max-width: 1023px) {
  .productitem--actions {
    width: 100%;
    margin-top: auto;
    margin-right: 0;
    margin-left: 0;
  }
}
With
@media screen and (max-width: 1023px) {
  .productitem--actions {
    width: 100%;
    margin-top: auto;
    margin-right: 0;
    margin-left: 0;
    padding-bottom: .6875rem;
    padding-left: .6875rem;
    padding-right: .6875rem;
    padding-top: 0;
  }
}

Find .productitem

Replace
.productitem {
  position: relative;
  flex-grow: 1;
  width: 100%;
  min-height: 100%;
  height: var(--base-height, auto);
  padding: .6875rem;
  background: rgb(255,255,255);
  transition: height .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1);
}

with

.productitem {
  position: relative;
  flex-grow: 1;
  width: 100%;
  min-height: 100%;
  height: var(--base-height, auto);
  background: rgb(255,255,255);
  transition: height .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1);
}

Add below css to theme.css

.productitem--image-link {
  margin: 0;
}
3

Thanks a lot. It worked.

4

You’re welcome @AamirAsad