april_tak Posted January 13, 2023 Posted January 13, 2023 Hi @tuanphan, my page has the same issue. I've tried all codes above but it's not helping. Please find the page here: https://www.redressdesignaward.com/home Thanks in advance for the help!!
tuanphan Posted January 15, 2023 Posted January 15, 2023 On 1/13/2023 at 10:30 AM, april_tak said: Hi @tuanphan, my page has the same issue. I've tried all codes above but it's not helping. Please find the page here: https://www.redressdesignaward.com/home Thanks in advance for the help!! You mean this gallery? 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!)
april_tak Posted January 30, 2023 Posted January 30, 2023 @tuanphan yes, that's the gallery which crop the images
tuanphan Posted February 1, 2023 Posted February 1, 2023 On 1/30/2023 at 5:21 PM, april_tak said: @tuanphan yes, that's the gallery which crop the images Hi. It looks like you solved with this code? @media only screen and (max-width: 640px) { .sqs-gallery-block-slideshow{ height:30vh !important;} .sqs-gallery-block-slideshow img{ width:50%} .sqs-gallery-block-slideshow .meta { display: block !important; position: absolute; background: #fff; width: 100vw; min-height: 300px !important; left: 0px; top: 30vh; max-width: 100% !important; z-index:0; } .sqs-gallery-block-slideshow .meta-title { color:rgb(84,84,84) !important; text-align: center; font-size:20px !important; padding-bottom:25px; } .sqs-gallery-block-slideshow .meta-description p, .sqs-gallery-block-slideshow .meta-description a { color:rgb(84,84,84) !important; text-align: justify; font-size:16px !important; } #block-yui_3_17_2_6_1488331956550_8686 { padding-top:300px !important; z-index: -1 !important; } } 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!)
april_tak Posted February 2, 2023 Posted February 2, 2023 On 2/1/2023 at 2:53 PM, tuanphan said: Hi. It looks like you solved with this code? @media only screen and (max-width: 640px) { .sqs-gallery-block-slideshow{ height:30vh !important;} .sqs-gallery-block-slideshow img{ width:50%} .sqs-gallery-block-slideshow .meta { display: block !important; position: absolute; background: #fff; width: 100vw; min-height: 300px !important; left: 0px; top: 30vh; max-width: 100% !important; z-index:0; } .sqs-gallery-block-slideshow .meta-title { color:rgb(84,84,84) !important; text-align: center; font-size:20px !important; padding-bottom:25px; } .sqs-gallery-block-slideshow .meta-description p, .sqs-gallery-block-slideshow .meta-description a { color:rgb(84,84,84) !important; text-align: justify; font-size:16px !important; } #block-yui_3_17_2_6_1488331956550_8686 { padding-top:300px !important; z-index: -1 !important; } } Hi @tuanphan, the code is added, but the problem remains. So NO, the issue has yet to be solved.
Loribo Posted February 19, 2023 Posted February 19, 2023 Hi @tuanphan, I'm having the same issue for two SquareSpace artist sites that I'm building. I've tried all of the solutions that you suggested with no luck for the store product gallery (the store landing page). I did get the product detail pages working with this code: img.ProductItem-gallery-slides-item-image { object-fit: contain !important; } Here are the two sites - the images on the product store page are cropped, but product detail pages are ok: https://www.madjello.com/julia https://www.andreawilkinsonfineart.com/ Thanks!! Lori
tuanphan Posted February 21, 2023 Posted February 21, 2023 On 2/20/2023 at 4:40 AM, Loribo said: Hi @tuanphan, I'm having the same issue for two SquareSpace artist sites that I'm building. I've tried all of the solutions that you suggested with no luck for the store product gallery (the store landing page). I did get the product detail pages working with this code: img.ProductItem-gallery-slides-item-image { object-fit: contain !important; } Here are the two sites - the images on the product store page are cropped, but product detail pages are ok: https://www.madjello.com/julia https://www.andreawilkinsonfineart.com/ Thanks!! Lori Use this code for store page .products.collection-content-wrapper .grid-item img { object-fit: contain !important; } Loribo 1 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!)
Loribo Posted February 21, 2023 Posted February 21, 2023 Thank you SO much @tuanphan - that worked!!! Lori
Mary_DG Posted June 14, 2023 Posted June 14, 2023 Hello Tuanphan, URL: https://formebar-sample.squarespace.com/ PW: HC I am trying to keep the image intact without the need to scroll. But want it on full bleed, you will see that there is header and the image below it is cropped. See attached. I am hoping to achieve this from reference site: https://www.pickuplimes.com/ where it has header and then image that ends before you scroll down the page. So, 1, i am thinking need to decrease height of header? 2, also need how to add caption on the image on same place as reference site?
tuanphan Posted June 15, 2023 Posted June 15, 2023 On 6/14/2023 at 9:38 AM, Mary_DG said: Hello Tuanphan, URL: https://formebar-sample.squarespace.com/ PW: HC I am trying to keep the image intact without the need to scroll. But want it on full bleed, you will see that there is header and the image below it is cropped. See attached. I am hoping to achieve this from reference site: https://www.pickuplimes.com/ where it has header and then image that ends before you scroll down the page. So, 1, i am thinking need to decrease height of header? 2, also need how to add caption on the image on same place as reference site? Something like this? With reference site, I see it has issues with layout. Can you check it again? 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!)
Mary_DG Posted June 15, 2023 Posted June 15, 2023 Hello Tuanphan, Here is the full image:If i use this and use gallery, slideshow full: it will crop the top and the bottom of the image. see:https://www.hellocinnamon.com/homepage-1 I am hoping to retain the size of the image also keep the size intact on mobile. thank you in advance.
tuanphan Posted June 19, 2023 Posted June 19, 2023 On 6/15/2023 at 3:06 PM, tuanphan said: Something like this? With reference site, I see it has issues with layout. Can you check it again? You mean make image behind header like this + make image fullsize? 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!)
Fae Posted July 10, 2023 Posted July 10, 2023 I am also having this issue and have not been able to find any code that will fix it @tuanphan Can you help? https://helix-tunny-psaf.squarespace.com/ pass: 321
tuanphan Posted July 10, 2023 Posted July 10, 2023 23 minutes ago, Fae said: I am also having this issue and have not been able to find any code that will fix it @tuanphan Can you help? https://helix-tunny-psaf.squarespace.com/ pass: 321 You mean top image on homepage on mobile? 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!)
Fae Posted July 10, 2023 Posted July 10, 2023 42 minutes ago, tuanphan said: You mean top image on homepage on mobile? no, on the gear page the reel gallery images are cropping themselves
maboli Posted June 27 Posted June 27 Hi, I want to stop the slide show on my landing page on the last slide, is this possible? Also, is there a way I can fit it to the screen on mobile? https://helicon-cardioid-tcx8.squarespace.com/ pw. studionh_ap
tuanphan Posted June 28 Posted June 28 20 hours ago, maboli said: Hi, I want to stop the slide show on my landing page on the last slide, is this possible? Also, is there a way I can fit it to the screen on mobile? https://helicon-cardioid-tcx8.squarespace.com/ pw. studionh_ap To fit on mobile, you can use this code to Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:991px) { .gallery-fullscreen-slideshow { height: 25vh !important; } } 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!)
maboli Posted June 28 Posted June 28 Hi, that's worked but I now have a magenta block below, how do I change this to the yellow?
tuanphan Posted July 1 Posted July 1 On 6/28/2024 at 5:43 PM, maboli said: Hi, that's worked but I now have a magenta block below, how do I change this to the yellow? You can use this CSS code body.homepage { background-color: #e0fd2c; } 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!)
maboli Posted July 10 Posted July 10 I also have a problem where the last slide is briefly showing when the site first loads, is there a way I can remedy this. The code I have used is as follows: sections .gallery-fullscreen-slideshow[data-transition="fade"] { figure, .gallery-fullscreen-slideshow-item-src{ opacity:1; } .gallery-fullscreen-slideshow-item{ visibility: visible; } }#sections .gallery-fullscreen-slideshow[data-transition="fade"] { figure, .gallery-fullscreen-slideshow-item-src{ opacity:1; } .gallery-fullscreen-slideshow-item{ visibility: visible; } figure:last-child { animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } }
tuanphan Posted July 12 Posted July 12 On 7/10/2024 at 2:34 PM, maboli said: I also have a problem where the last slide is briefly showing when the site first loads, is there a way I can remedy this. The code I have used is as follows: sections .gallery-fullscreen-slideshow[data-transition="fade"] { figure, .gallery-fullscreen-slideshow-item-src{ opacity:1; } .gallery-fullscreen-slideshow-item{ visibility: visible; } }#sections .gallery-fullscreen-slideshow[data-transition="fade"] { figure, .gallery-fullscreen-slideshow-item-src{ opacity:1; } .gallery-fullscreen-slideshow-item{ visibility: visible; } figure:last-child { animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } } Have you solved it yet? 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!)
maboli Posted July 12 Posted July 12 No, it's still briefly showing the last slide when you first load the site.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment