Showing 3 columns in the store on mobile

Hello forum. I have a website. This website displays technical specifications of automobiles. I designed it as a store but it only displays information. My question is, on mobile, it shows the products in the store in 2 columns. I want to increase this to 3. Can we do this with Custom CSS? Thank you in advance.

Site is: shortlyauto.com

4 hours ago, fehmiu said:

Hello forum. I have a website. This website displays technical specifications of automobiles. I designed it as a store but it only displays information. My question is, on mobile, it shows the products in the store in 2 columns. I want to increase this to 3. Can we do this with Custom CSS? Thank you in advance.

Site is: shortlyauto.com

try the following custom Css code

@media only screen and (max-width: 767px) {
  #collection-65bfcd1f85c33b021e79fb7f .gallery-masonry-item {
    position: relative !important;
    transform: none !important;
    width: 30% !important;

  }

  #collection-65bfcd1f85c33b021e79fb7f .gallery-masonry-wrapper.gallery-masonry-list--ready {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
  }

  #collection-65bfcd1f85c33b021e79fb7f .gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
  }

  #collection-65bfcd1f85c33b021e79fb7f .gallery-masonry-item-wrapper {
    height: auto !important; 
  }
}

Let me know how it goes

My testing

Thank you for the response, there are gaps in between at mine, and how can I fix longer texts as Mercedes-Benz did with different font sizes?"

14 hours ago, fehmiu said:

Thank you for the response, there are gaps in between at mine, and how can I fix longer texts as Mercedes-Benz did with different font sizes?"

I'll check on it