Mobile Display Issues with Image: Collage

Site URL: https://www.shopuhhuh.com/card

Having issues with mobile view of my image: collage – everything looks great when I inspect, but not on an actual device white space is wild! 

URL: https://www.shopuhhuh.com/card

css being used:

Quote

//image collage
.sqs-block-image .design-layout-collage .image-card {
  background-color: #F2F0EA;
      border:.5px solid #121212!important;
}
.sqs-block-image .design-layout-collage:not(.sqs-narrow-width).image-position-left .image-card {
  width: 50%;
    margin-right: 20%;
  margin-left:30%;
}

.sqs-block-image .design-layout-collage:not(.sqs-narrow-width).image-position-right .image-card {
    width: 50%;
    margin-right: 30%;
  margin-left:20%;
}

@media (max-width: 640px){
  div .sqs-block-image .image-block-outer-wrapper.image-block-v2 {
    flex-direction: column !important; 
    display: flex !important;
    align-items: center !important;
         padding-left:0px!important;
    padding-right:0px!important;
        width:100%!important;
    }
   .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-right .intrinsic {
  left: 0 !important;
     margin-top:10%!important;
         padding-left:0px!important;
     padding-right:0px!important;

  }   
  .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-left .intrinsic {

    margin-top:10%!important;

  }
  .sqs-block-image .design-layout-collage .image-button {
    margin-top:10%!important;
  margin-bottom:10%!important;
         margin-left:0px!important;
     margin-right:0px!important;
  }
   .sqs-block-image .design-layout-collage .image-card {

      border:0.5px solid #121212!important;
     margin-top:20%;
     margin-bottom:10%;
     margin-left:0px!important;
     margin-right:0px!important;
     width:100%!important;
}

}
[data-section-id="60ba51b909e55433f301148a"]{.content-wrapper  {
      padding: 0px !important;
      margin: 0px auto;
      display: contents;
    }
    .sqs-layout .sqs-row .sqs-block {
      padding-bottom: 0px !important;
      padding-top: 0px !important;
    }
}

@media (max-width: 640px){
  [data-section-id="60ba51b909e55433f301148a"]
.content-wrapper  {
      padding: 10px !important;
      margin: 10px auto;
      display: contents;
    }

}

.sqs-block-image .design-layout-collage {
      padding: 0px !important;
      margin: 0px !important;
}

 

images for reference

Hello there,

Were you able to solve this problem? I tested it on my iPhone 11 with the latest IOS installed and it looked fine on my end.

I have not solved but it seems to be isolated to only my device... thank you for checking on your end!