Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Increasing the image size in a collage image block on Mobile


AkankshaK

Question

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

Screen Shot 2020-05-04 at 15.35.51.png

Screen Shot 2020-05-04 at 15.35.38.png

Link to comment

4 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0

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%
  }
}
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...