dawn theme help - two different views on multicolumn for mobile/desktop

Hi - is anyone able to help me please?

I have a multicolumn with 4 images on my homepage, and would like to view them as ‘adapt to image’ on desktop but view them as portrait on mobile.

Is this possible to achieve? I just do not like how the images look on mobile as ‘adapt to image’ as my images are horizontal rectangles which look weird on mobile. Is there a way to make these images bigger too, as they look quite small on my Macbook. I also have circle multicolumn on ‘Contact Us’ and can anyone tell me what image sizing should be for multicolumn images - cannot find this anywhere.

Any help would be amazing! :slightly_smiling_face:

www.smara.co.uk

Thanks in advance,

Ankita

Hi @Ankita31 , Your store is password protected. Please provide access so the community members can review and help you.

@Lucid_Polygon hi - I have sent you a message :slightly_smiling_face:

@PageFly-Victor are you able to help with this query please? Thanks so much!

@Litos are you please able to help me with the above query? Thank you so much, Ankita

Hi @Ankita31 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
  #Slider-template--14328136794241__f9252b9f-419d-4311-bec6-dc8f759e4666 .media {
    padding-bottom: 125% !important;
  }
}

Hope it helps!

Hi @Litos you are amazing!!!

That has worked, I do not think I like it being portrait on mobile though, as it cuts my image off is there any way we might be able to keep it as ‘adapt to image’ but make the images look larger as they look quite small on mobile and desktop even with the padding being looked into. Thanks so so much, Ankita

Hi @Ankita31 ,

You just need to reduce the number 125, maybe 100, it will work fine.

Hope it helps!

AMAZING! @Litos thank you for your help - you have been great! Have sent you a link for another question that is in regards to image sizing for multicolumn for mobile only. If you could kindly help me please! :slightly_smiling_face: