Single column carousel summary block only for mobile view

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.

Something like this example?

https://tuanphan.squarespace.com/list-section-carousel-3?noredirect

pass: abc

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.

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

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.

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.

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.

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?

8 minutes ago, tuanphan said:

is this right?

Yes, that's right. 

Thanks.

Dear @tuanphan,

Thanks a lot!! It works just fine!

Kind regards.

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!

@Lesum Any chance you might be able to help with this? 🙏

@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>

@Lesum Just tried and it's still doing it 😕 Is this happening because I added a border around the thumbnails?

@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;
}
  
}

@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. 🤪