Cyperpunk-girl-333 Posted March 22, 2022 Share Posted March 22, 2022 Mobile View Carousel to display 3 images columns side by side instead of one giant image? Does anyone know how to create a media query for 3 columns on the gallery, carousel so it mimics the desktop view for a more visually appealing feel to mobile view Link to comment
tuanphan Posted March 23, 2022 Share Posted March 23, 2022 Can you share link to page in screenshot? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Cyperpunk-girl-333 Posted March 24, 2022 Author Share Posted March 24, 2022 15 hours ago, tuanphan said: Can you share link to page in screenshot? We can check easier www.enchantanddelight.com.au homepage reviews carousel Link to comment
tuanphan Posted March 26, 2022 Share Posted March 26, 2022 On 3/24/2022 at 7:11 AM, christina_marie_333 said: www.enchantanddelight.com.au homepage reviews carousel Thank you. I see product list only, no carousel on https://enchantanddelight.com.au/ Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Cyperpunk-girl-333 Posted March 26, 2022 Author Share Posted March 26, 2022 51 minutes ago, tuanphan said: Thank you. I see product list only, no carousel on https://enchantanddelight.com.au/ https://enchantanddelight.squarespace.com/config/pages password help Link to comment
Cyperpunk-girl-333 Posted March 26, 2022 Author Share Posted March 26, 2022 https://enchantanddelight.com.au/home Password help. Also how do I remove negative space between section blocks on desktop and mobile view and is there a way to format the Three images in the second child too add display side by side with text blocks in mobile view to match desktop. Thank you greatly need help Link to comment
Cyperpunk-girl-333 Posted March 27, 2022 Author Share Posted March 27, 2022 On 3/26/2022 at 1:52 PM, tuanphan said: Thank you. I see product list only, no carousel on https://enchantanddelight.com.au/ Did that work for you @tuanphan 🙂 Link to comment
tuanphan Posted March 29, 2022 Share Posted March 29, 2022 Try adding to Design > Custom CSS > then save & reload the site @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="623864e6c69f9c657ced8636"] ul { grid-template-columns: repeat(3,1fr) !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Cyperpunk-girl-333 Posted March 30, 2022 Author Share Posted March 30, 2022 13 hours ago, tuanphan said: Try adding to Design > Custom CSS > then save & reload the site @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="623864e6c69f9c657ced8636"] ul { grid-template-columns: repeat(3,1fr) !important; } } Thank you so so much! I’ve applied and it works perfectly. I’d like to know how to remove negative padding page on mobile? In the different child’s. Also I’ve uploaded photos to try to explain what i am needing further assistance with. Q1 In the second child of the page on desktop view the images in first screenshot appear side by side (horizontally with text block directly below the image) Is there CSS available on Sqaurespace that can help these four images and text boxes to display the same on mobile and desktop view. Q2 Is it possible to add CSS code so that the image card block appears the same on desktop and mobile view as seen in the screenshot where the image is beside the text? At the moment the text card displays below the image. Q3 Same goes for screenshot 3, is there CSS that can force the image to display beside the text? And in a way that the image and text padding are the same height? Link to comment
Cyperpunk-girl-333 Posted March 30, 2022 Author Share Posted March 30, 2022 This is the negative space I am referring to. Thank you Link to comment
tuanphan Posted April 1, 2022 Share Posted April 1, 2022 Add to Design > Custom CSS /* Mobile-Homepage-Negative Black padding */ @media screen and (max-width:767px) { [data-section-id="623d3d1daf057f7c2f1810dc"] { min-height: unset !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Cyperpunk-girl-333 Posted April 1, 2022 Author Share Posted April 1, 2022 6 minutes ago, tuanphan said: Add to Design > Custom CSS /* Mobile-Homepage-Negative Black padding */ @media screen and (max-width:767px) { [data-section-id="623d3d1daf057f7c2f1810dc"] { min-height: unset !important; } } Thank you. that worked. Are you able to help out with the other question in this chain msg Link to comment
tuanphan Posted April 2, 2022 Share Posted April 2, 2022 On 4/1/2022 at 2:48 PM, christina_marie_333 said: Thank you. that worked. Are you able to help out with the other question in this chain msg Q1 In the second child of the page on desktop view the images in first screenshot appear side by side (horizontally with text block directly below the image) Is there CSS available on Sqaurespace that can help these four images and text boxes to display the same on mobile and desktop view. Q2 Is it possible to add CSS code so that the image card block appears the same on desktop and mobile view as seen in the screenshot where the image is beside the text? At the moment the text card displays below the image. Q3 Same goes for screenshot 3, is there CSS that can force the image to display beside the text? And in a way that the image and text padding are the same height? Add to Design > Custom CSS /* Mobile home 4 columns */ @media screen and (max-width:767px) { div#page-section-623d414508e1be4a83b89ba2 .span-3 { width: 25% !important; float: left !important; } div#page-section-623d414508e1be4a83b89ba2 .span-3 * { font-size: 12px; } /* q2 */ div#block-092b802cf5a26de05c6a figure { display: flex; -ms-justify-content: space-between; justify-content: space-between; align-items: center; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
iJizzy1 Posted August 3, 2022 Share Posted August 3, 2022 Hello @tuanphan, I would like to remove the arrows (on desktop and mobile) of my lists of images : My website: www.brondyhumphrey.com psw: pure Could you help me with this please ? Link to comment
tuanphan Posted August 5, 2022 Share Posted August 5, 2022 On 8/3/2022 at 7:46 AM, iJizzy1 said: Hello @tuanphan, I would like to remove the arrows (on desktop and mobile) of my lists of images : My website: www.brondyhumphrey.com psw: pure Could you help me with this please ? Can you check site url? I entered password 4 times, it doesn't say incorrect but always reload password page Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
iJizzy1 Posted August 5, 2022 Share Posted August 5, 2022 Hello @tuanphan , I desactivated the multilanguage code. It is working now, you can access to my website. Link to comment
tuanphan Posted August 10, 2022 Share Posted August 10, 2022 On 8/3/2022 at 7:46 AM, iJizzy1 said: Hello @tuanphan, I would like to remove the arrows (on desktop and mobile) of my lists of images : My website: www.brondyhumphrey.com psw: pure Could you help me with this please ? Add code to Page Header <style> div[class*="arrows"] {display: none !important;} </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
iJizzy1 Posted August 10, 2022 Share Posted August 10, 2022 It is working for the list of images but I have also some list of summary block as you can see on the page. Do you have the code for removing the arrows of the summary block lists ?(the one you gave me only remove the arrows of the list of images.) Also, If I remove the arrows I wont be able to naviguate between each block anymore... This is why I would like to be able to slide between each block like on the Netflix app. Do you think you could find a code to make someting like that also ? We are still on the same page called : https://www.brondyhumphrey.com/expansion-2 Link to comment
NzuriTalents Posted February 24 Share Posted February 24 On 3/29/2022 at 12:58 PM, tuanphan said: Try adding to Design > Custom CSS > then save & reload the site @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="623864e6c69f9c657ced8636"] ul { grid-template-columns: repeat(3,1fr) !important; } } Hi there I tried doing the same with my website but instead switched the data section id, but it didn't work, any advise Link to comment
tuanphan Posted February 27 Share Posted February 27 On 2/25/2023 at 2:54 AM, NzuriTalents said: Hi there I tried doing the same with my website but instead switched the data section id, but it didn't work, any advise Need a space here Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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