Jump to content

Please help! Mobile version crops images when desktop version looks fine. And vice-versa.

Recommended Posts

Posted

Hi all

I know this issue has been discussed to death, but whenever I try the code from other posts it never works. Basically, like other people, when I set the "Item Height" in INDEX: LAYOUT to "Small", it's perfect for my mobile version. But it makes my desktop version too horizontal (cropping the top and bottom of images)

(GOOD MOBILE VERSION!)
image.thumb.png.898d5fcc06fe3b5d9f6d64b2be815384.png

(
BAD DESKTOP VERSION!)
Screenshot2024-03-27at12_32_13PM.thumb.png.f01c031de252386fa1769c0a553802a7.png

However, when I get my desktop to look right by setting "Item Height" to "Large", it makes the mobile version too cropped:

(GOOD DESKTOP VERSION!)
Screenshot2024-03-27at12_32_43PM.thumb.png.d01d8f0f5720834a7b2e03f21c5ad6a8.png

(BAD MOBILE VERSION!)
Screenshot2024-03-27at12_33_10PM.thumb.png.400a0b1c8d5123694918322238bff83e.png


Basically I want the orange highlighted versions above. Any help would be greatly appreciated! It can obviously do both layouts I like, but just not at the same time. I'm just a beginner when it comes to CSS so maybe that's my problem? I tried the codes from other posts but nothing happens when I place them into my custom CSS.

Big thanks in advance!
 

  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.