tuanphan Posted July 24, 2023 Share Posted July 24, 2023 On 7/19/2023 at 10:20 PM, Braydenn said: @tuanphan it works but, the images are cropped and the spaces are smaller. i dont want it to be cropped or have the whitespace between each content to be smaller. Do you have a way around that? Thank you so much for your help sir. Try this /* Make List Images bigger */ @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="64a26e7218f7284ce0398612"] ul img { transform: scale(1.3) !important; } .user-items-list-item-container[data-section-id="64a26e7218f7284ce0398612"] ul { grid-gap: 5px 5px !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!) Link to comment
Braydenn Posted July 25, 2023 Share Posted July 25, 2023 On 7/19/2023 at 11:20 PM, Braydenn said: @tuanphan it works but, the images are cropped and the spaces are smaller. i dont want it to be cropped or have the whitespace between each content to be smaller. Do you have a way around that? Thank you so much for your help sir. @tuanphan Hey Tuanphan, thanks for getting back tome. However, it's the same issue as before, it works but the images in the carousel are cropped and the whitespace px in between the carousel decreased. I don't want that 😞 Do you have a way around that? Let me know. Thank you for ur help once again 🙂 Link to comment
tuanphan Posted July 26, 2023 Share Posted July 26, 2023 website url: dailycine.co/testhomedevpreview-1 Password: testhome Try this new code @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="64a26e7218f7284ce0398612"] ul { grid-gap: 5px !important; } .user-items-list-item-container[data-section-id="64a26e7218f7284ce0398612"] ul li { padding: 0px !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!) Link to comment
Chloeb Posted August 18, 2023 Share Posted August 18, 2023 Hi there, I'm having the same issue, would like to make the carousel images on this link into page links. https://www.thefamilytreatmentservice.com/about-us Thank you! Link to comment
tuanphan Posted August 19, 2023 Share Posted August 19, 2023 20 hours ago, Chloeb said: Hi there, I'm having the same issue, would like to make the carousel images on this link into page links. https://www.thefamilytreatmentservice.com/about-us Thank you! You mean Clinic Staff section? 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!) Link to comment
asenicz Posted August 19, 2023 Share Posted August 19, 2023 Hello! I am brand new to squarespace. I am converting my web page now, it is not published / live yet. I created carousels on two pages without realizing I couldn't add links to them. (My fault for assuming.) Is it possible to get help with CSS for this before I connect my domain, or do I need to wait? I am not sure how to insert code but I can do some research. Link to comment
Chloeb Posted August 20, 2023 Share Posted August 20, 2023 On 8/19/2023 at 10:48 AM, tuanphan said: You mean Clinic Staff section? No the Our Therapy Services section - I want to lose the buttons and have the images as clickable links instead! Thanks Link to comment
tuanphan Posted August 21, 2023 Share Posted August 21, 2023 On 8/19/2023 at 8:44 PM, asenicz said: Hello! I am brand new to squarespace. I am converting my web page now, it is not published / live yet. I created carousels on two pages without realizing I couldn't add links to them. (My fault for assuming.) Is it possible to get help with CSS for this before I connect my domain, or do I need to wait? I am not sure how to insert code but I can do some research. You can enable carousel items button, then we can give code to turn button link to whole item link (image, title) 17 hours ago, Chloeb said: No the Our Therapy Services section - I want to lose the buttons and have the images as clickable links instead! Thanks Use this code to Custom CSS box /* Our Theraphy Services */ [data-section-id="64df705f97296f70ccb18afe"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} 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!) Link to comment
RomanBri Posted August 24, 2023 Share Posted August 24, 2023 Dear tuanphan, I followed your advide and comments here, very helpful. My website is romanbriker.de and I want to make both the images and the text below them in the carousel "Media" as hyperlinks. So I would need to add 8 hyperlinks to 8 images and 8 text parts respectively. Could you help me with that? Link to comment
hannahleomt Posted August 25, 2023 Share Posted August 25, 2023 Hi tuanphan, I would like the same thing as several others on this thread. My website is not yet live. Here are the login credentials: URL: https://dog-gar-8ehe.squarespace.com/ PSWD: help123! The section I would like to have the images clickable without buttons is on the WHO WE ARE page under the CONSERVATION PARTNERS logos (clickable images not buttons). I have this section on another page and saved as a design section. Will your code work on all sections or need to be built on any page with that section? Also, will I need to update this code once the site is live? Thanks! Hannah Link to comment
tuanphan Posted August 27, 2023 Share Posted August 27, 2023 On 8/25/2023 at 2:12 AM, RomanBri said: Dear tuanphan, I followed your advide and comments here, very helpful. My website is romanbriker.de and I want to make both the images and the text below them in the carousel "Media" as hyperlinks. So I would need to add 8 hyperlinks to 8 images and 8 text parts respectively. Could you help me with that? You need to enable buttons first > Add url for these buttons, then add this code to Website > Website Tools > Custom CSS /* Media */ [data-section-id="64df55d59d66fb38e4361e84"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} 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!) Link to comment
tuanphan Posted August 27, 2023 Share Posted August 27, 2023 On 8/26/2023 at 12:49 AM, hannahleomt said: Hi tuanphan, I would like the same thing as several others on this thread. My website is not yet live. Here are the login credentials: URL: https://dog-gar-8ehe.squarespace.com/ PSWD: help123! The section I would like to have the images clickable without buttons is on the WHO WE ARE page under the CONSERVATION PARTNERS logos (clickable images not buttons). I have this section on another page and saved as a design section. Will your code work on all sections or need to be built on any page with that section? Also, will I need to update this code once the site is live? Thanks! Hannah Password is incorrect. 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!) Link to comment
winonashoplifts Posted September 19, 2023 Share Posted September 19, 2023 Hello @tuanphan I would like to make the images in my home page carousel hyperlinked to individual project pages. Website is https://www.bren.work/ can you help me out? Thanks! Link to comment
tuanphan Posted September 21, 2023 Share Posted September 21, 2023 On 9/20/2023 at 1:43 AM, winonashoplifts said: Hello @tuanphan I would like to make the images in my home page carousel hyperlinked to individual project pages. Website is https://www.bren.work/ can you help me out? Thanks! You can enable List items buttons > Add url to buttons > Then use this code to Website > Website Tools > Custom CSS. The code will hide button + turn button link to image link body.homepage { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} 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!) Link to comment
Ollie26 Posted September 28, 2023 Share Posted September 28, 2023 Hello @tuanphan I'm hoping to achieve the same result with clickable images (as well as read more buttons) in the carousel in several instances on this website. Please could you help with the code? I'm looking at the carousel on the home page, the team on who we are and the our work gallery. www.sunflower-chihuahua-j7lf.squarespace.com Many thanks, Ollie Link to comment
tuanphan Posted October 1, 2023 Share Posted October 1, 2023 On 9/28/2023 at 6:38 PM, Ollie26 said: Hello @tuanphan I'm hoping to achieve the same result with clickable images (as well as read more buttons) in the carousel in several instances on this website. Please could you help with the code? I'm looking at the carousel on the home page, the team on who we are and the our work gallery. www.sunflower-chihuahua-j7lf.squarespace.com Many thanks, Ollie I see you used Lightbox instead. Do you still need help with clickable images? Or if no, do you need to click image >> open lightbox, same as button? 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!) Link to comment
Ollie26 Posted October 2, 2023 Share Posted October 2, 2023 Hi @tuanphan, Yes, on the teams page, I would like to click the images to open the lightbox (same a button) . On the homepage carousel I would like the image to also link through to the page it goes to. Many thanks, Ollie Link to comment
tuanphan Posted October 6, 2023 Share Posted October 6, 2023 On 10/2/2023 at 4:23 PM, Ollie26 said: Hi @tuanphan, Yes, on the teams page, I would like to click the images to open the lightbox (same a button) . On the homepage carousel I would like the image to also link through to the page it goes to. Many thanks, Ollie With homepage, add this code to Website Tools (under Not Linked) > Custom CSS body.homepage { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} With Team page Add this code to Custom CSS /* Team Page */ body#collection-64ae858dce288121907a9dfd { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} 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!) Link to comment
flair20tv Posted October 10, 2023 Share Posted October 10, 2023 (edited) Hi @tuanphan, could you also help me with the css code to remove the buttons and make the images clickable in my carousel? https://flair20.tv Many thanks, Mehul Edited October 10, 2023 by flair20tv Link to comment
tuanphan Posted October 12, 2023 Share Posted October 12, 2023 On 10/10/2023 at 7:30 PM, flair20tv said: Hi @tuanphan, could you also help me with the css code to remove the buttons and make the images clickable in my carousel? https://flair20.tv Many thanks, Mehul Use this code body.homepage { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} flair20tv 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!) Link to comment
gromova_photo Posted October 13, 2023 Share Posted October 13, 2023 (edited) Hi @tuanphan, I have a similar request and tried to use different solutions provided earlier, but none have worked as I needed. Here is the page: https://gromova-photo.com/portfolio The target carousel block is "personal branding photoshoots". I already have the buttons with links added, alongside some custom animation for buttons and images on the carousel. What I require is to add links from buttons (each button forwards to a different page) to the respective images, so that they are not just coloured on the hover, but also clickable. At the same time, I would like to keep the buttons as they are. Could you please kindly help with that? Edited October 13, 2023 by gromova_photo Link to comment
tuanphan Posted October 15, 2023 Share Posted October 15, 2023 On 10/13/2023 at 3:45 PM, gromova_photo said: Hi @tuanphan, I have a similar request and tried to use different solutions provided earlier, but none have worked as I needed. Here is the page: https://gromova-photo.com/portfolio The target carousel block is "personal branding photoshoots". I already have the buttons with links added, alongside some custom animation for buttons and images on the carousel. What I require is to add links from buttons (each button forwards to a different page) to the respective images, so that they are not just coloured on the hover, but also clickable. At the same time, I would like to keep the buttons as they are. Could you please kindly help with that? Use this code /* Carousel clickable */ .user-items-list-item-container[data-section-id="6419d5af9c0402101905d40b"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} 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!) Link to comment
Robin710 Posted October 18, 2023 Share Posted October 18, 2023 Hi @tuanphan So I have gotten the clicking on the carousel images all working however when I put the click and drag code found in here in the footer injection it overrided the original clickable images. Sadly I can't give you a link as the page isn't public and I can't give you access either but I can send in the code I've got in both the general custom CSS and the footer injection but it is just a copy paste of yours with the data id updates. Hope you are well Robin Link to comment
gromova_photo Posted October 19, 2023 Share Posted October 19, 2023 On 10/15/2023 at 10:49 AM, tuanphan said: Use this code /* Carousel clickable */ .user-items-list-item-container[data-section-id="6419d5af9c0402101905d40b"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} Thanks @tuanphan, however, this doesn't work properly. Please see the video: https://share.zight.com/4guRl46G It provides exactly the same result as the one I've tried before - the button is moved to the image and still visible on hover. What I need is to keep the button below the image (how it is working now) and make the image clickable. Link to comment
tuanphan Posted October 21, 2023 Share Posted October 21, 2023 On 10/18/2023 at 4:58 PM, Robin710 said: Hi @tuanphan So I have gotten the clicking on the carousel images all working however when I put the click and drag code found in here in the footer injection it overrided the original clickable images. Sadly I can't give you a link as the page isn't public and I can't give you access either but I can send in the code I've got in both the general custom CSS and the footer injection but it is just a copy paste of yours with the data id updates. Hope you are well Robin You can follow this guide to share url On 10/19/2023 at 9:54 PM, gromova_photo said: Thanks @tuanphan, however, this doesn't work properly. Please see the video: https://share.zight.com/4guRl46G It provides exactly the same result as the one I've tried before - the button is moved to the image and still visible on hover. What I need is to keep the button below the image (how it is working now) and make the image clickable. Can you keep code + Share link to page where you use carousel? 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!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment