MayaViolet Posted March 22, 2022 Share Posted March 22, 2022 Hi all - Working on using SS's auto-list sections so that they work well both on Desktop and Mobile. I would like to have the "Simple List" layout on desktop, so that I can list information for easily legibility from the get-go, but have it adjust to a "Carousel" version on mobile, without having to create two versions, one for each screen size. My thought process is to take the Carousel version, but on desktop, change the layout to 1 column with the "Elements" stacked on top of each other, and hide the arrows. Mockup example below. I can't for the life of me figure out the code to do it. Any ideas? Link to comment
tuanphan Posted March 24, 2022 Share Posted March 24, 2022 Can you share link to page where you added carousel? 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
MayaViolet Posted March 24, 2022 Author Share Posted March 24, 2022 (edited) 9 hours ago, tuanphan said: Can you share link to page where you added carousel? We can check easier Yup! Page is here (pw: test). The first section has the layout using "Simple List" as I'd like it to look on desktop. The section below is duplicated, but set to "Carousel." Ideally would like to use code targeting @media all and (min-width: 640px) to change the "Carousel" to look like the section above it on Desktop, but remain swipeable in Carousel form on mobile. Thanks for your time as always @tuanphan! *Note - This page^ is different from the mockups above, but same concept! Edited March 24, 2022 by MayaViolet Link to comment
Solution tuanphan Posted March 26, 2022 Solution Share Posted March 26, 2022 On 3/25/2022 at 12:18 AM, MayaViolet said: Yup! Page is here (pw: test). The first section has the layout using "Simple List" as I'd like it to look on desktop. The section below is duplicated, but set to "Carousel." Ideally would like to use code targeting @media all and (min-width: 640px) to change the "Carousel" to look like the section above it on Desktop, but remain swipeable in Carousel form on mobile. Thanks for your time as always @tuanphan! *Note - This page^ is different from the mockups above, but same concept! Try adding to Design > Custom CSS /* Desktop - List Carouse to Grid */ @media screen and (min-width:992px) { .user-items-list-item-container[data-section-id="623ca73e73bc4d410798f0b1"] { .user-items-list-carousel__slides { grid-template-columns: repeat(4,1fr) !important; } .user-items-list-carousel__slide { transform: unset !important; pointer-events: initial !important; grid: unset !important; display: block !important; grid-column: unset !important; grid-row: unset !important; user-select: unset !important; } .user-items-list-carousel__arrow-wrapper { display: none !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
MayaViolet Posted March 28, 2022 Author Share Posted March 28, 2022 On 3/26/2022 at 12:02 AM, tuanphan said: Try adding to Design > Custom CSS /* Desktop - List Carouse to Grid */ @media screen and (min-width:992px) { .user-items-list-item-container[data-section-id="623ca73e73bc4d410798f0b1"] { .user-items-list-carousel__slides { grid-template-columns: repeat(4,1fr) !important; } .user-items-list-carousel__slide { transform: unset !important; pointer-events: initial !important; grid: unset !important; display: block !important; grid-column: unset !important; grid-row: unset !important; user-select: unset !important; } .user-items-list-carousel__arrow-wrapper { display: none !important; }}} That did the trick! Thank you @tuanphan, you are a savior! tuanphan 1 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