Jump to content

Aligning Product Photo with Product Description

Go to solution Solved by Lesum,

Recommended Posts

I used this code found here to create custom aspect ratios for the images on my product pages but now the images don't top align with the title/details section in my products page.  I'm trying to get the images and title to top align like they did before the custom ratio. Would appreciate any help. Thank you!!

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

 

image.thumb.png.7fcdb03873424c989ddd0ab63928baaa.png

 

Edited by Sibba
Link to comment
  • Replies 6
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

@Sibba You can add this code snippet within the Custom CSS panel:

@media only screen and (min-width: 768px) {
	.sqs-gallery-design-stacked-slide img {
		top: 0 !important;
	}
}

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

 

@Sibba The code you added earlier has an issue; as you can see, there's a red text warning about a 'missing closing }'. Unfortunately, I can't identify the error without seeing the entire code block.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Hi Lesum,

 

That has always been there. I have a lot more code above but it hasn't caused any issues so i don't think it's related to this. Here is everything though for reference:

 

html {
    cursor: url(https://static1.squarespace.com/static/5d913898c92ec9603f7c0a43/t/5d937236a6347f3e8cf8c7d6/1569944118878/SIBSIBBOOKS_Cursor.png), auto !important;
}

a:hover {
  text-decoration: underline;}

header nav a:hover {
 background-color: transparent !important;}

#collection-5d9138dc9b5e6a60e97b3122{
.gallery-block {
  filter: drop-shadow(3px 3px 5px #808080);
  }
  
  a:hover {
   background-color: transparent !important;
 }
body, p {
}

.sqs-block-product {   padding-right: 0px!important; padding-top: 0px!important;    padding-bottom: 0px!important}

.sqs-gallery-controls .previous::before {
   content: "PREV";
}

.sqs-gallery-controls .next::before {
   content: "NEXT";
}

.previous::after {
 content: "/";
 color: #2E2E2E;
 margin-left: 5px
}

#collection-5d92e40bea0f7f3315d455db{

  .gallery-block {
    a:hover {
   background-color: #ffffff !important;
    }}
   

.sqs-block-product {   padding-right: 0px!important; padding-top: 0px!important;    padding-bottom: 0px!important}


.sqs-gallery-controls {
   background-color: white;
   padding-top: 15px;
     text-align: right;
}

.previous::after {
 content: "/";
 color: #2E2E2E;
 margin-left: 5px
  }
  
  .sqs-block-horizontalrule hr {
 background: #000000;!important
  }
  
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
  }
  @media only screen and (min-width: 768px) {
    .sqs-gallery-design-stacked-slide img {
        top: 0 !important;
    }
}

Link to comment
On 9/26/2023 at 2:02 AM, Sibba said:

Hi Lesum,

 

That has always been there. I have a lot more code above but it hasn't caused any issues so i don't think it's related to this. Here is everything though for reference:

 

html {
    cursor: url(https://static1.squarespace.com/static/5d913898c92ec9603f7c0a43/t/5d937236a6347f3e8cf8c7d6/1569944118878/SIBSIBBOOKS_Cursor.png), auto !important;
}

a:hover {
  text-decoration: underline;}

header nav a:hover {
 background-color: transparent !important;}

#collection-5d9138dc9b5e6a60e97b3122{
.gallery-block {
  filter: drop-shadow(3px 3px 5px #808080);
  }
  
  a:hover {
   background-color: transparent !important;
 }
body, p {
}

.sqs-block-product {   padding-right: 0px!important; padding-top: 0px!important;    padding-bottom: 0px!important}

.sqs-gallery-controls .previous::before {
   content: "PREV";
}

.sqs-gallery-controls .next::before {
   content: "NEXT";
}

.previous::after {
 content: "/";
 color: #2E2E2E;
 margin-left: 5px
}

#collection-5d92e40bea0f7f3315d455db{

  .gallery-block {
    a:hover {
   background-color: #ffffff !important;
    }}
   

.sqs-block-product {   padding-right: 0px!important; padding-top: 0px!important;    padding-bottom: 0px!important}


.sqs-gallery-controls {
   background-color: white;
   padding-top: 15px;
     text-align: right;
}

.previous::after {
 content: "/";
 color: #2E2E2E;
 margin-left: 5px
  }
  
  .sqs-block-horizontalrule hr {
 background: #000000;!important
  }
  
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
  }
  @media only screen and (min-width: 768px) {
    .sqs-gallery-design-stacked-slide img {
        top: 0 !important;
    }
}

You missed a }

image.thumb.png.b278665c310f1b8539ad4ff701527543.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.