Jump to content

Changing image/gif aspect ratio while viewing on mobile

Recommended Posts

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

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

 

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 7 months later...

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;
}



 

✦✦
Co-founder Hundred Studio 👋

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.