Search the Community

I am looking to be able to have photos of my products for the 'shop' section of my site in two differing aspect ratios. I have both vertical and horizontal images and don't want to have to choose one aspect ratio. Doing so crops half of my products in an unflattering way. There is no way to retake the photos in all the same aspect ratio. As ceramic work, all products tend to need different aspect ratios. Does anyone know of a custom CSS that will help this? I am using the Ventura template which does not have the Advanced Product page. Thanks!

Site URL: https://belwooddesigns.com I have some images for products that are portrait and some that are landscaped. Some look good on mobile and some that are cropped out like crazy. Is there any way to make changes on each product in the design tab? I noticed when I make a change it changes them all? I supposed I can delete the Items block on the store page and sit there listing them one by one with product blocks which would kinda suck. You can see an example of what I mean below with the original item. I'm not super familiar with editing the CSS if thats the only fix but I can most likely figure it out with some guidance.

Site URL: https://okra-grouper-m4cl.squarespace.com/ PW: Noord I use two different shops on one page under SQS 7.1. The images should have different settings regarding the aspect ratio, but the setting always refers to both shops. Can I intervene here or can I switch off the aspect ration under Product items? The page is https://okra-grouper-m4cl.squarespace.com/ (PW: Noord)

Site URL: https://www.thislandisdigital.com/ Context: I've spent some time trying to apply a custom grid layout to my index so that I can highlight certain projects with double sized thumbnails. To do this I followed this tutorial which targets an index: gallery block from a different template rather than the standard index I have available in Avenue (not sure if the scaling is different because of this). I was able to successfully assign an area to each of the index thumbnails and arrange them the way I wanted using grid-template-areas with one main issue. Problem: The thumbnails are forced to match the aspect ratio in my site style rather than cropping or stretching to fill the grid's literal space. What I want is to have a combination of 2/1 and 1/1 aspect ratios. My site style can be one or the other (50 or 100). No matter which I choose, the grid is being stretched vertically to match the same ratio. Here's my code so far. I'll deal with the tablet and mobile arrangements when I solve the desktop issues. #collection-5c89d82aee6eb05083075575 #projectThumbs { > div { // Create a grid layout on the index. display: grid; // Visually map the named items below to the grid using spaces. Repetition matters. grid-template-areas: "firstAB firstAB firstCD firstCD" "secondA secondB secondC secondD" "thirdA thirdBC thirdBC thirdD" "fourthA fourthB fourthC fourthD"; @media screen and (max-width: 800px) { //grid-template-areas: ""; } @media screen and (max-width: 640px) { //display: block; } } // First Row a:nth-of-type(1){ grid-area: firstAB; // Name of the item. } a:nth-of-type(2){ grid-area: firstCD; } // Second Row a:nth-of-type(3){ grid-area: secondA; } a:nth-of-type(4){ grid-area: secondB; } a:nth-of-type(5){ grid-area: secondC; } a:nth-of-type(6){ grid-area: secondD; } // Third Row a:nth-of-type(7){ grid-area: thirdA; } a:nth-of-type(8){ grid-area: thirdBC; } a:nth-of-type(9){ grid-area: thirdD; } // Fourth Row a:nth-of-type(10){ grid-area: fourthA; } a:nth-of-type(11){ grid-area: fourthB; } a:nth-of-type(12){ grid-area: fourthC; } a:nth-of-type(13){ grid-area: fourthD; } } I attached a picture of the result I want vs. the result I'm getting. * I had to temporarily revert my site to a standard 4-wide index and comment the CSS out. Didn't want to leave my site up in a broken state while I wait for a solution (it requires a 1-wide index for some reason). I was able to reduce the visible size of specific images, but only the image element and not whatever larger element it's attached to (still new to CSS). Hopefully the screenshots and my code will be enough to get a hint or direction.

Site URL: https://jasonwyates.squarespace.com/short-films Hi, I'm putting together a page of video samples. It's a gallery of YouTube videos embedded in a page. (using the "Stacked" design option) For some reason, one of the videos ("Cloyd" - the third one down) is showing up as 4:3 instead of 16:9. Everything else is functioning correctly. Its confusing, because both the original YouTube video, as well as the thumbnail image are 16:9. I even tried using the image editor to re-crop the thumbnail to 16:9 to be sure. Is there a setting somewhere I'm missing? I don't see anything about aspect ratio in either the page gallery settings, or the gallery itself. thanks!

I have two different photos side by side of different items. The left item photo is perfect--it shows the entire item. The right photo is the irritating close up of part of the item in the photo. I understand this is an aspect ratio problem for the second photo. I double click on the right closeup photo. I click on Image Editor, then crop. The closest best look for the item in the photo is 5:4. But now the entire photo is larger than the first photo, but in a horizontal way. So I now go back to the first photo, which is smaller. I click on Image Editor, then crop. I chose 5:4, then Apply and Save. It's STILL smaller than the right photo. I am lost.

Hi all, In Design -> Product Items -> Aspect Ratio it gives you just a single option. The problem that I'm having is that some images on a website i'm building are (generally) either 4:3 or 3:2, shot natively on different cameras. Is there a better way to address this so images maintain their original aspect ratio and don't follow this setting? I found this post and some code: .summary-thumbnail-image.loaded { object-fit: contain !important; object-position: top; width: 100% !important; height: 100% !important; position: static !important; padding-bottom: 0px !important; margin-bottom: 0px !important; } .sqs-block-summary-v2 .img-wrapper { position: relative; width: 100%; height: auto; padding-bottom: 0px !important; But it doesn't affect product details page...see attached screenshots. Thanks for your help! J

I have square product images on one product page (cd covers) but would like 2:3 standard (vertical) on a different product page (sheet music). Is that possible? Using 7.1

Site URL: https://bananastand.store/shop Having a problem with a container created via Windows 10. Could someone help assist with apply Css for windows specific? The container ratio seems to be working fine via Android, Iphone, Mac. Not sure about Desktop via Windows. Not sure if there is a specific responsive css code? .drawer-nav { z-index: 999999; width: 18.65rem; } .drawer--right .drawer-nav { right: -21.25rem; } .drawer--right.drawer-open .drawer-hamburger { right: 18.25rem; } .drawer.drawer--right button.drawer-toggle { display: none; } .drawer.drawer--right.drawer-close button.drawer-toggle { display: none; } .drawer.drawer--right.drawer-open button.drawer-toggle { display: block; } @media only screen and (max-width: 1500px) { .drawer--right.drawer-open .drawer-hamburger { right: 0.25rem; }

Site URL: https://monarchdesignint.com/door-styles/rt1tmo9ipkudgygh0kc9cxr4wzet0j My product images are relatively long and narrow. The aspect ratios provided still crop some of the bottom of the image. I'm only able to have them fully displayed in "stacked" but I want to have them show in the "slideshow" option. Not sure how to do this and not experienced with code injections. https://monarchdesignint.com/door-styles/rt1tmo9ipkudgygh0kc9cxr4wzet0j password: monarch1

Site URL: https://www.lensflair.org/ My banner video plays normally on desktop but when viewed on mobile there is a crop on both sides of the screen. Does anyone have an idea on how i can make it conform to mobile (scale to fit screen size) instead of cropping it out? Or is it possible to have 2 different videos for mobile and desktop view. Thank you so much, ive been breaking my head over this. Cheers

Hello. I'm using the Miller template and I'm not a seasoned coder by any means, yet I've made a concerted effort to solve this on my own with no success. I'm seeking guidance on how to create css or java script code that will allow me to override the aspect-ratio handle for a specific gallery page that's featuring one image. The image is 16:9, yet the Miller template is using code that's forcing the image to be cropped to a square from edge to edge when viewed. I don't want to use the global aspect-ratio handle to resolve this as the other gallery pages are perfect as they are. I've tried using the code inspector tools with both firefox and safari to figure out what the handle is for aspect-ratio and have experimented with using different handles with no success. With success using css, I can adjust the padding and the width as well as max-width, yet what I really need control of is the aspect-ratio handle as the other handles listed are not yielding desirable results. Is there a handle for aspect-ratio that the user can manipulate via css or java script? I've tried: {aspect-ratio: 50;} with no success. Any guidance you have is welcome here. Thank you kindly in advance for your help with this.