Changing image/gif aspect ratio while viewing on mobile

Site URL: https://imriagmon.com/

Hello!

I'm looking to modify the first image on my homescreen so it would appear wide (full size) on desktop and be cropped to a square on mobile. (exactly as it is on this reference website: www.ezracohen.tv)
Right now it's a simple image with text embeded on it but I plan on using an image block poster, so the text would respond to different screen sizes.

Is there any css code I can embed to replicate what's seen on the reference?

Thank you in advance,
Imri

26 minutes ago, ImriAgmon said:

Site URL: https://imriagmon.com/

Hello!

I'm looking to modify the first image on my homescreen so it would appear wide (full size) on desktop and be cropped to a square on mobile. (exactly as it is on this reference website: www.ezracohen.tv)
Right now it's a simple image with text embeded on it but I plan on using an image block poster, so the text would respond to different screen sizes.

Is there any css code I can embed to replicate what's seen on the reference?

Thank you in advance,
Imri

Replace the background url on mobile

Quote

@media only screen and (max-width: 640px) {
      #block-yui_3_17_2_1_1603906785414_100062 .image-block-wrapper {
        padding-bottom: 100% !important;
        background: url(https://images.squarespace-cdn.com/content/v1/556c3615e4b07c2b29306de1/1603973081927-MZ4RKR7IW3J5FOKS1V14/ke17ZwdGBToddI8pDm48kIIFsYAJJX10OgNkc4SuD20UqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKc0B_S51vn2t0C6Ru9HDtgYkoqg1rxHCAhKxuAnmum7NzLTGHrW3XTfUUrPp5JBXSS/THUMBNAIL2.gif?format=750w);
        background-size: cover;
        background-position: 50% 50%:
      }
      #block-yui_3_17_2_1_1603906785414_100062 .image-block-wrapper img {
      opacity: 0;
      }
}

 

43 minutes ago, bangank36 said:

Replace the background url on mobile

 

Thank you for the help!

What do you mean by replacing the backgroun url?
Where do I add the code you wrote?
Do I need to modify anything?

5 minutes ago, ImriAgmon said:

Thank you for the help!

What do you mean by replacing the backgroun url?
Where do I add the code you wrote?
Do I need to modify anything?

Add it to: design - custom css

Replace your image url in background: url()... It is your image in 1:1 ratio, it will replace current one on desktop

Trying to do something similar, image aspect ratio is fine for desktop but too narrow on mobile, so I'd like to make it portrait. (See image attached, on homepage)

https://www.suzannehamiltonpodiatry.com/ 
Pass: hs100

Ideally banner would take up around 70% screen height. I've tried to edit it and can get the image to extend down but then the text overlay doesn't match up and a few other issues.

Not quite there…

 

  ////BANNER IMAGE
  #block-2518090d1655ad77c24f div {
  margin-top: 10px !important;
  height: 200px !important;
  padding-bottom: 200px !important;
  width: auto !important;
}
   #block-2518090d1655ad77c24f .sqs-block-content {
  margin-bottom: 20px !important;
}
   #block-2518090d1655ad77c24f img {
  width: auto !important;
  margin-left: -100px;
}
     #block-2518090d1655ad77c24f .img-overlay {
 display: none !important;
}