Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Product details page: can I use a grid instead of slideshow for gallery images?


Recommended Posts

Thanks for your help! That's actually distorting the images (making them too narrow). Is there a way to retain square and have them in a grid above or below the text?

 

Link to post
1 hour ago, kimbeck said:

Thanks for your help! That's actually distorting the images (making them too narrow). Is there a way to retain square and have them in a grid above or below the text?

 

You're right, let me check

I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Link to post
10 hours ago, kimbeck said:

Thanks for your help! That's actually distorting the images (making them too narrow). Is there a way to retain square and have them in a grid above or below the text?

 

Hi there, tried another shot:
image.thumb.png.28711007642d038dfe2d7b798fd3e9b7.png

#productSummary {
  display: flex;
  flex-flow: column;
}
#productSlideshow {
  position: relative !important;
}
#productGallery {
  width: 100%;
  float: right;
  order: 1;
}
#productGallery .wrapper {
  padding-bottom: 0 !important; 
  position: relative;
  height: auto;
}
#productDetails {
    width: 100%;
    margin-top: 0px;
    order: 0;
}
#productSlideshow .sqs-gallery-design-stacked-slide {
  opacity: 1 !important;
  position: relative;
  float: left;
  overflow: auto !important;
  height: auto !important;
  margin-bottom: 10px;
  padding-left: 10px;
  box-sizing: border-box;
  width: 50% !important;
}
#productSlideshow .sqs-gallery-design-stacked-slide img {
  position: relative !important;
  float: none;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
}
#productThumbnails {
  display: none;
}

 

Edited by bangank36
change

I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Link to post
4 hours ago, kimbeck said:

thank you! But now it's just stacking all the images. I'd really just like a grid like this:

http://www.idealcities.com/a-field-guide-to-weeds

I will update the code above, you can copy from there

image.thumb.png.606ae8a6f99fb179340e01914eb48cbf.png

I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Link to post
5 minutes ago, kimbeck said:

It worked! Thanks!

Also, is there a way to change the padding around the commerce front page grid? So that it matches what is on other pages? LIke this: http://www.idealcities.com/#/roadweavings/

or http://www.idealcities.com/

Here you go, add this below the current code

#canvas {
  max-width: none;
}
#header {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}

image.thumb.png.4151ab745deeb26f198b57e488d28ee7.png

I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Link to post

Ok! For shop page, smaller padding between images, to match what it is on other pages. On site styles, it is 1.6% for the index page.

Link to post
48 minutes ago, kimbeck said:

Ok! For shop page, smaller padding between images, to match what it is on other pages. On site styles, it is 1.6% for the index page.

 

#productList .product {
      margin-left: 1.57480315%;
    margin-top: 1.6%;
}

image.thumb.png.e9dbab5d54755132b93d62a963649a56.png

I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Link to post

In case you need expand the space on product page

#productGallery #productSlideshow .slide {
    padding-left: 1.57480315%;
    padding-top: 1.6%;
}

 

I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...