How to make pictures smaller for the phone?

Site URL: http://www.littlepinetoys.com

Hi!

I am happy with how my page looks on pc, but I'm bothered by how it is on the phone. Pictures are too big. I want them smaller, 3 or 4 in a row, if possible and not one by one. Basicly similar to web page.

Can someone please help me out with a code?

Is it the result you want to achieve?

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  .user-items-list-item-container {
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 20px !important;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

On 11/26/2021 at 4:45 PM, bangank36 said:

Thank you so so much! Do you have any code for the first photo (hero or baner or whats the correct name)? If it can be smaller?

 

Is it the result you want to achieve?

 

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  .user-items-list-item-container {
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 20px !important;
  }
}

Let me know how it works on your site

 

 

 

Press 👍 or mark this answer as solution to help another one too

@trapdooralice to resize hero slide, try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="6176e6f4e0e8eb155e17df52"] ul {
    min-height: 10vh !important;
}
.user-items-list-item-container[data-section-id="6176e6f4e0e8eb155e17df52"] ul img {
    object-fit: contain !important;
}
}

43 minutes ago, tuanphan said:

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="6176e6f4e0e8eb155e17df52"] ul {
    min-height: 10vh !important;
}
.user-items-list-item-container[data-section-id="6176e6f4e0e8eb155e17df52"] ul img {
    object-fit: contain !important;
}
}

It worked, thank you so much! Text is a bit too big and it covers the pictures, do you have any code for this? Also, but not that important, if there is a code for make the space a bit smaller/put the slide show a bit higher.

On 12/4/2021 at 4:21 PM, trapdooralice said:

It worked, thank you so much! Text is a bit too big and it covers the pictures, do you have any code for this? Also, but not that important, if there is a code for make the space a bit smaller/put the slide show a bit higher.

Keep the code & add this code under

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="6176e6f4e0e8eb155e17df52"] {
h2.list-item-content__title {
    position: relative;
    top: -100px;
}
.list-item-content__button-container {
    position: relative;
    top: -100px;
}}
}

On 12/8/2021 at 9:09 AM, tuanphan said:

Keep the code & add this code under

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="6176e6f4e0e8eb155e17df52"] {
h2.list-item-content__title {
    position: relative;
    top: -100px;
}
.list-item-content__button-container {
    position: relative;
    top: -100px;
}}
}

 

This happens