Image card full width on mobile

Site URL: https://thebrownlab.squarespace.com/team-1

Hi, Im using an image card and it looks great in desktop but mobile seems off. I would like the image and the content be full width for all. Is there anyone that can help?

Thanks!

On 2/15/2022 at 2:35 PM, dchavez said:

Site URL: https://thebrownlab.squarespace.com/team-1

Hi, Im using an image card and it looks great in desktop but mobile seems off. I would like the image and the content be full width for all. Is there anyone that can help?

Thanks!

@tuanphan Do you have any ideas for this? thank you!

On 2/18/2022 at 10:08 PM, dchavez said:

@tuanphan Do you have any ideas for this? thank you!

Add to Design > Custom CSS

/* Team 1 mobile image */
@media screen and (max-width:767px) {
body#collection-620bfe5b65861525a0483cf5 .image-block {
    width: 90% !important;
    margin: 0 auto;
}
}

Thank you! @tuanphanworks perfectly, do you know how to reduce the height from that same 1 photo on mobile, It cant seem to reduce it

On 2/22/2022 at 4:55 AM, dchavez said:

Thank you! @tuanphanworks perfectly, do you know how to reduce the height from that same 1 photo on mobile, It cant seem to reduce it

The url doesn't exist. Can you check it again?

https://thebrownlab.squarespace.com/team-1

@tuanphan Hello! Is it possible to target just the image (not the text within the image card, this will remain 100% width), reducing the image overlay width to 75%? Thanks!

@tuanphan  I figured it out! 

section[data-section-id="668f97338799474a77dcba69"]  .intrinsic {
  width: 75% !important;
  margin: 0 auto;
}