Owden Posted March 25 Share Posted March 25 (edited) Hello everyone, My website: https://www.cpmarket.eu/ (version 7.1). I'm working on my website and I run into the following little problem. On my home page I have two summary blocks in carousel layout. I would like for the mobile view, the two summary blocks on my home page to show only 1 post each, maintaining the carousel layout (not a column with all the posts stacked). Browsing the forum I think I have read that this would be difficult to achieve directly and that the simplest solution was to create 2 summary blocks, one that is visible only in desktop view (with 3 posts per row) and another visible only in mobile view (with 1 post, but scrollable). Is it possible to do something like this? Can someone give me a hand with this? Thank you very much in advance. Edited March 25 by Owden website url Link to comment
tuanphan Posted March 27 Share Posted March 27 Something like this example? https://tuanphan.squarespace.com/list-section-carousel-3?noredirect pass: abc 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
Owden Posted March 27 Author Share Posted March 27 (edited) Hi @tuanphan, First of all, thank you for your reply. Yes, exactly. I would like to have something like this. I have uploaded an example. I would like Image 1 as a desktop view and Image 3 as a mobile view, as you did in your example. Thanks again. Edited March 27 by Owden Uploaded image. Link to comment
tuanphan Posted March 29 Share Posted March 29 On 3/27/2024 at 7:04 PM, Owden said: Hi @tuanphan, First of all, thank you for your reply. Yes, exactly. I would like to have something like this. I have uploaded an example. I would like Image 1 as a desktop view and Image 3 as a mobile view, as you did in your example. Thanks again. With Summary Block Carousel, there are two options to solve this #1. You can add 2 Summaries, I will give code to show 1 on desktop, show another on mobile #2. Use custom plugin to sync List Carousel with Summary Carousel, then we can use CSS code to set items on mobile (I used #2 in my example) If you choose (1), you can add both, then I will check & give the code If you choose (2), let me know, I will write a guide for you 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
Owden Posted March 29 Author Share Posted March 29 3 hours ago, tuanphan said: With Summary Block Carousel, there are two options to solve this #1. You can add 2 Summaries, I will give code to show 1 on desktop, show another on mobile #2. Use custom plugin to sync List Carousel with Summary Carousel, then we can use CSS code to set items on mobile (I used #2 in my example) If you choose (1), you can add both, then I will check & give the code If you choose (2), let me know, I will write a guide for you Thanks a lot for your reply. To be honest I don´t know which solution is better. At first glance, it seems like #1 is easier to implement and manage, but I don´t know if it would overload the homepage and make it slower. In the end, there would be 4 summary blocks (2 for desktop view and 2 for mobile view). On the other hand, #2 seems more complicated (at least for me) to manage and make design changes to summary blocks in future. My impression is that #1 is a better solution, but what would you recommend? Thanks again for your help. Link to comment
tuanphan Posted March 31 Share Posted March 31 On 3/29/2024 at 6:30 PM, Owden said: Thanks a lot for your reply. To be honest I don´t know which solution is better. At first glance, it seems like #1 is easier to implement and manage, but I don´t know if it would overload the homepage and make it slower. In the end, there would be 4 summary blocks (2 for desktop view and 2 for mobile view). On the other hand, #2 seems more complicated (at least for me) to manage and make design changes to summary blocks in future. My impression is that #1 is a better solution, but what would you recommend? Thanks again for your help. If you're worried it will slow down the page, you can try adding it first, so you can know if it really slows down the page or not. And this way you won't have to spend money to buy custom plugin. 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
Owden Posted March 31 Author Share Posted March 31 9 hours ago, tuanphan said: If you're worried it will slow down the page, you can try adding it first, so you can know if it really slows down the page or not. And this way you won't have to spend money to buy custom plugin. Dear @tuanphan, Thanks again for your help. I've added the additional summaries for the mobile view and it doesn't seem like the website has slowed down significantly. Therefore, I believe solution #1 is the best option. Please, could you provide me with the necessary code? Thanks a lot. Link to comment
tuanphan Posted April 3 Share Posted April 3 On 4/1/2024 at 5:43 AM, Owden said: Dear @tuanphan, Thanks again for your help. I've added the additional summaries for the mobile view and it doesn't seem like the website has slowed down significantly. Therefore, I believe solution #1 is the best option. Please, could you provide me with the necessary code? Thanks a lot. is this right? 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
Owden Posted April 3 Author Share Posted April 3 8 minutes ago, tuanphan said: is this right? Yes, that's right. Thanks. Link to comment
Solution tuanphan Posted April 5 Solution Share Posted April 5 On 4/3/2024 at 4:14 PM, Owden said: Yes, that's right. Thanks. You can use this code to Website > Website Tools > Custom CSS @media screen and (max-width: 767px) { .fe-block-yui_3_17_2_1_1708697400018_7171, .fe-block-a32664e2649c21bf4787, .fe-block-bfd55a35a41700d72f33, .fe-block-68ad8eed433dc715b7f7 { display: none; } .fe-65d8adad9394a8243ae81fc3, .fe-65d8afa5e81a4d338d154ffe { display: block; padding: 6vw; } .fe-block-yui_3_17_2_1_1708697400018_12057, .fe-block-yui_3_17_2_1_1708697400018_14024 { margin-bottom: 6vw; }} @media screen and (min-width: 768px) { .fe-block-a55e22292f952b01a4fe, .fe-block-b7dd6436c30150a67b96 { display: none; } .fe-65d8adad9394a8243ae81fc3, .fe-65d8afa5e81a4d338d154ffe { display: block; padding: 0 6vw ; } .fe-block-yui_3_17_2_1_1708697400018_12057, .fe-block-yui_3_17_2_1_1708697400018_14024 { margin-bottom: 2vw; } .fe-block-a32664e2649c21bf4787, .fe-block-68ad8eed433dc715b7f7 { margin-top: 3vw; }} 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
Owden Posted April 5 Author Share Posted April 5 Dear @tuanphan, Thanks a lot!! It works just fine! Kind regards. tuanphan 1 Link to comment
ellen_b Posted August 27 Share Posted August 27 Hi @tuanphan I used the code from this thread to make my summary blocks single-width on mobile, but when I scroll through the carousel it is cutting some of them off. Is that because I have an outline around my summary images? (see screenshot) https://upwardpartners.squarespace.com/?password=brian This is the CSS I've used: /* Adds border around list section cards */ .list-item[data-is-card-enabled="true"] { border:2px #0560B5 solid; } /* Adds cyan border to blog thumbnails and blog post images */ .summary-thumbnail { border: 2px solid #0560B5; } Do you have any ideas? Thanks so much! Link to comment
ellen_b Posted August 28 Share Posted August 28 @Lesum Any chance you might be able to help with this? 🙏 Link to comment
Lesum Posted August 28 Share Posted August 28 @ellen_b Hi! It looks like the summary items are shifting 1% to the left each time the carousel buttons are clicked, causing them to get increasingly cropped. Here's a solution you can add in Website > Pages > Website Tools > Code Injection > Header <script> document.addEventListener('DOMContentLoaded', function() { if (window.innerWidth <= 767) { const list = document.querySelector('.summary-item-list'); const prevButton = document.querySelector('.summary-carousel-pager-prev.previous'); const nextButton = document.querySelector('.summary-carousel-pager-next.next'); let translateXValue = 0; function updateTranslateX() { list.style.transform = `translateX(${translateXValue}%)`; list.style.transition = 'transform 0.3s ease-in-out'; } prevButton.addEventListener('click', function() { if (translateXValue < 0) { translateXValue += 100; } updateTranslateX(); }); nextButton.addEventListener('click', function() { const maxTranslateValue = -(list.childElementCount - 1) * 100; if (translateXValue > maxTranslateValue) { translateXValue -= 100; } updateTranslateX(); }); } }); </script> tuanphan 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted August 28 Share Posted August 28 @Lesum Just tried and it's still doing it 😕 Is this happening because I added a border around the thumbnails? Link to comment
Lesum Posted August 28 Share Posted August 28 (edited) @ellen_b Nop, It's not due to the border around the thumbnails. When I tested the script in the browser, it worked, but it’s not functioning correctly after being added to Squarespace's code injection. I need to check it on a site. For now, you can add the following CSS code to fix the issue, but please note that it requires adding padding to each summary item individually: @media screen and (max-width: 767px) { .summary-item-list .summary-item:nth-child(2) { padding-left: 2% !important; } .summary-item-list .summary-item:nth-child(3) { padding-left: 3% !important; } .summary-item-list .summary-item:nth-child(4) { padding-left: 4% !important; } .summary-item-list .summary-item:nth-child(5) { padding-left: 5% !important; } } Edited August 28 by Lesum Updated code, only for mobile view If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
ellen_b Posted August 29 Share Posted August 29 (edited) @Lesum Strange, I wonder what the root issue is. I added this most recent CSS and that fixed the alignment (THANK YOU!), but for some reason the carousel is only scrolling through 3 of the 5 case studies on mobile. It gets to the third one and then stops like there's no more. It's set to show 6 total items. I'm not sure whether it was stopping at 3 before I added the code. 🤪 Edited August 29 by ellen_b 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