Jump to content

Trying to find code to fix issue with mobile

Go to solution Solved by JayVanDyke,

Recommended Posts

Hi

 

I'm running off of the Henson template. I've noticed that the featured image that hovers for each page section in the navigation gets cropped or cut off awkwardly when viewing in mobile.  Does anyone know a code or solve to have the featured page image scaled down when viewed on a mobile device? See screenshot example below

 

Thank you!

Greg

image.thumb.png.bb2cba7712040a3d32ed3c5e9a3705e9.pngimage.thumb.png.0f46aae0595bc4ec37a0f8997d15c0e1.pngimage.thumb.png.e7203a1b642e3554acae2d72c71e6e32.png

 

Link to comment

@GregR You could try this in custom css. It should center them right in the middle and make the whole thing show on mobile. This doesn't shorten the section though so it keeps your navigation at the bottom and fills the screen.

@media only screen and (max-width: 640px) {
  .collection-images .image-container {
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
}

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Link to comment
  • Solution

@GregR ah i think i missed one selector and i added a few other things to try to make sure it works. Try this.

@media only screen and (max-width: 640px) {
  .collection-images .image-container img {
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
  }
}

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

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.