Help with images layout on Mobile device

Site URL: https://adicovintage.com.au/

Hi I am just after some help

I have added a section with images and a link on my website. They are the perfect size when on my laptop or computer. They also have the faded grey when you hover over which is what I want.

My problem is that on mobile devices they are coming out like this on mobile:

Just so big and taking way too much space. It looks real ugly.

I want the 4 of them to look like this on the mobile (this was done with gallery selection). In a group of 4 neatly spaced and perfect size.

Any assistance will be really appreciated!

3 hours ago, bangank36 said:

I try the following code and it fixes for the first section

@media only screen and (max-width: 767px) {
  section[data-section-id="60d42efe808384202ace9c66"] {
    height: 77vh; 
  }

  section[data-section-id="60d42efe808384202ace9c66"] .section-background {
    height: 0;
    padding-bottom: 100%;
    margin-top: 134.75px;
  }
  section[data-section-id="60d42efe808384202ace9c66"] .section-background img{
    height: auto !important;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you for sending that but that did not work.😟

7 hours ago, bangank36 said:

Sorry for misunderstand, you can try the following code

@media only screen and (max-width: 767px) {
  section[data-section-id="61ee26f985cdd239889af3b7"]   .sqs-layout  > .row > .col {
    width: 50% !important;
    float: left !important;
  }

  section[data-section-id="61ee26f985cdd239889af3b7"]   .sqs-layout  > .row > .col  > .sqs-block {
    padding: 2px !important;
  }
}

Let me know how it works on your site

 

Thank you for this, works perfect!