Jump to content

Aligning wide product image with title

Recommended Posts

Site URL: https://whitprint.squarespace.com


Is there a hack to make wide images align with the top of the product title on the product detail page? We're using 7.0, Montauk.

If you would kindly take a look here:


(password is "tada") you will see two products, Tall and Wide. Looks okay so far.

But then when you click on Wide, you'll see the image does not align with the title, as it does for Tall.

I am hoping there is some code we can inject to make the image and title align on the product detail page, without changing the alignment of the images on the product collection page.



Link to comment
  • Replies 3
  • Views 1.2k
  • Created
  • Last Reply
1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS

#productDetails {
    top: 60px;


@tuanphan Thanks, but this seems to work for one image dimension only, and it causes the Add-to-Cart button to collide with the Additional Info content below it.

Note that I put the code on the product page instead of in the site-wide styles so that it wouldn't interfere with production pages.

Screen Shot 2020-10-19 at 10.14.01 AM.png

Screen Shot 2020-10-19 at 10.14.25 AM.png

Screen Shot 2020-10-19 at 10.14.42 AM.png

Link to comment
  • 4 weeks later...

After relearning far more CSS, Javascript, and jQuery than I ever intended, I was able to craft a fairly general solution:

// Fix whitespace around singleton image on a product detail page. 
const imgWhitespaceFixer = function() {

	// This code assumes that (a) the products in this collection have only 
	// one image apiece (which is true for our products), and (b) the detail 
	// page has only one IMG.loaded element (which seems to be the case for 
	// our template).

	let w = $( 'img.loaded' ).css( 'width' );
	let h = $( 'img.loaded' ).css( 'height' );

	// Just in case we are observing in between setting a pair of dimensions:
	if ( ! ( w && h ) ) return;

	// This makes horizontal image align with title, and vertical image align 
	// with left margin of 'additional info' text (i.e. div#productDetails): 
	$( 'img.loaded' ).css( 'top', '0px' ).css( 'left', '0px' );

	// This seems to prevent accidental cropping: 
	$( '#productSlideshow' ).css( 'height', h ).css( 'width', w );

	// This prevents div#productDetails text from dangling too far below image:
	$( '#productGallery' ).css( 'height', h ).css( 'width', w );

// Sqs doesn't load images until after document ready (and it might
// even load them more than once, who knows). When it loads images it
// updates IMG attributes, and this observer detects when that happens.
const prodPageImgObserverJuju = function() {

	// This function runs when page changes (mutations) are observed
	const observerCallback = function(mutationsList, observer) {

		// How to tell whether this is the product collection page or the product 
		// detail page? This function could be executing for either, but our fix 
		// is only for the detail page. Just banging around in the dark, I found 
		// that #productList appears to test true with .hasClass(clear) only on 
		// the collection page.  On the detail page, #productList is in the DOM, 
		// strangely, but it fails this test. 
		if ( $( '#productList' ).hasClass( 'clear' ) ) {

		// Filter for changes to IMG.loaded 
		for (const mutation of mutationsList) {

			if (mutation.target.nodeName == 'IMG' &&
				mutation.attributeName == 'class' && 
				mutation.target.className == 'loaded' 
			) { 

	const observer = new MutationObserver( observerCallback );

	// Configure it to look for attribute changes (as opposed to child adds and
	// deletes), and to traverse subtree (presumably meaning all descendants 
	// of document.body.)
	const config = { attributes: true, childList: false, subtree: true };

	// Launch the observer on this page
	observer.observe( document.body, config );

jQuery(document).ready(function($) {
	// ...other code here


	// ...other code here


This works for 7.0/Montauk. It's is meant to go inside the <script></script> tag in the header code injection of a product page whose products all have only one image apiece. (The copious comments are for my own benefit; in a week I'm not going to remember any of this. 😄) It seems to do the right things with both wide and tall images, and on mobile as well as desktop. Hopefully there's enough here that anyone else who needs a similar fix can use it as a jumping-off point. It was certainly a learning experience for me.

Attached are 'before' and 'after' screenshots.


Screen Shot 2020-11-14 at 9.30.16 AM.png

Screen Shot 2020-11-14 at 9.30.59 AM.png

Link to comment


This topic is now archived and is closed to further replies.

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