Increasing the image size in a collage image block on Mobile

Hello, 

I am incorporating some Collage Image Blocks on my website and while they look great on desktop, they look pretty rubbish on mobile as the image looks much smaller than the text. 

Screenshots attached.

Is there anyway using CSS to increase the image size in collage image blocks, on mobile only?

Thanks

A

Any help appreciated guys 🙏

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage figure.design-layout-collage img {
    visibility: hidden;
}
}

On 5/5/2020 at 2:48 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage figure.design-layout-collage img {
    visibility: hidden;
}
}

 

Hi, with this code the image disappears but it remains gray and taking up space.

Is there a way to show only the part of text and colored background in mobile by totally eliminating the image?

Thanks!

Just found this code from Thompsonweb.design

//Collage Blocks Mobile
@media (max-width:480px){
  .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper{
    width:100%;
    margin-top:calc(0%)!important;
    position:relative}
  .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-right .intrinsic,.sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-left .intrinsic{
    left:5%
  }
}

On 6/16/2020 at 1:27 AM, laurasharp said:

Just found this code from Thompsonweb.design

//Collage Blocks Mobile
@media (max-width:480px){
  .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper{
    width:100%;
    margin-top:calc(0%)!important;
    position:relative}
  .sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-right .intrinsic,.sqs-block-image .design-layout-collage.sqs-narrow-width.image-position-left .intrinsic{
    left:5%
  }
}

Thank you! This seems to have fixed the problem (I had same problem as OP)