Jump to content

FinLB

Member
  • Posts

    6
  • Joined

  • Last visited

Everything posted by FinLB

  1. Thanks very much @tuanphan, this code works great however the carousel actually scrolls past the images as if there were 3 full width images, not a big deal but would be interested to know if you have any ideas to fix it? Thanks Cheers Fin
  2. No worries, I just realised it might not look great on mobile so you could replace the code with this @media screen and (min-width: 768px) { .gallery-reel { margin-bottom: -16vw; } } @media screen and (max-width: 768px) { .gallery-reel { margin-bottom: -36vw; } } to have two separate values. Cheers Fin.
  3. background: inherit!important; background-color: rgba(255, 255, 255, .3)!important; backdrop-filter: blur(5px)!important; I would try adding these lines in below where you've made it a pill shape, I assume within header { } The 255, 255, 255 values can be changed to a custom RGB value, and the .3 can alter the opacity of the header. The blur number in the next line can also be changed. Cheers Fin.
  4. Not 100% sure but I reckon inserting this should fix it, the -16 value can be adjusted to your preference. .gallery-reel { margin-bottom: -16vw; } Cheers Fin.
  5. Page url: https://www.miraiathletics.com/shop/p/shorts Hi, I have a product details page set to the 'Full' layout style, I have used custom CSS shown below @media screen and (min-width: 768px) { .pdp-gallery-wrapper { height: 30vw; } } @media screen and (max-width: 768px) { .pdp-gallery-wrapper { height: 90vw; } } to reduce the height of the gallery so that the product details are visible before scrolling, which has cropped a large portion of the images. I have two 3:2 images as the product photos and I would like to shrink them down to fit to the height of the gallery (or something around 110% of it) showing most of full image, instead of filling the width and cropping the edges. I understand this would not fill the width of the screen with two images so I have added a third image (GIF) at the moment. I have attached a screenshot of the existing page and one with drawings showing the goal. (This is not an issue on mobile, only the desktop version). Thanks very much Cheers Fin
×
×
  • 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.