1 column Summary block layout on mobile only

Site URL: https://rumahkeduamedia.com

is it possible to make the layout summary on the desktop remain as it is today, while on the mobile it changes to 1 part because the current summary when opened on mobile is very small and uncomfortable when pressing the arrow, except for the summary  type list

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1652790822955_18965 .summary-item {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}
}

10 hours ago, tuanphan said:

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1652790822955_18965 .summary-item {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}
}

 

On 5/25/2022 at 6:35 PM, yogap said:

hey looks great thanks, but can add margin from read more link  to thumbnail?

 

Use this new code

@media screen and (max-width: 767px) {
    div#block-yui_3_17_2_1_1652790822955_18965 .summary-item {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin-bottom: 50px !important;
    }
}

On 5/25/2022 at 1:29 PM, tuanphan said:

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1652790822955_18965 .summary-item {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}
}

 

Hey, this piece of code has worked great for me too but I was wondering if it's possible to restrict the summary block on mobile to also be 1 item tall? As opposed to multiple items stacked on top of each other. Thanks!

On 1/17/2023 at 6:19 AM, KLharvey said:

Hey, this piece of code has worked great for me too but I was wondering if it's possible to restrict the summary block on mobile to also be 1 item tall? As opposed to multiple items stacked on top of each other. Thanks!

You mean show slider with 1 item/row?

On 1/19/2023 at 3:20 PM, tuanphan said:

You mean show slider with 1 item/row?

Yes, I would be interested in this solution as well.

On 4/17/2023 at 12:02 AM, deets87 said:

Yes, I would be interested in this solution as well.

Can you share link to page where you use summary? We can check easier

On 4/18/2023 at 4:56 AM, tuanphan said:

Can you share link to page where you use summary? We can check easier

Sorry Tuanphan, I just now saw your reply.

https://www.rowac.com

I disabled the carousel in mobile view so that they're just stacked on top of each other. It would be nice to have the carousel working in mobile with just one product visible at a time.

On 4/29/2023 at 6:24 PM, deets87 said:

Sorry Tuanphan, I just now saw your reply.

https://www.rowac.com

I disabled the carousel in mobile view so that they're just stacked on top of each other. It would be nice to have the carousel working in mobile with just one product visible at a time.

You mean this?

8 hours ago, tuanphan said:

You mean this?

yup, that's the summary block I was referring to.

23 hours ago, deets87 said:

yup, that's the summary block I was referring to.

You can consider adding 2 Summaries: current with 3 items, bottom with 1 item/row, we can give code to show 3 on desktop, show 1 on mobile

7 hours ago, tuanphan said:

You can consider adding 2 Summaries: current with 3 items, bottom with 1 item/row, we can give code to show 3 on desktop, show 1 on mobile

Hi Tuanphan, thanks, that sounds good.

8 hours ago, deets87 said:

Hi Tuanphan, thanks, that sounds good.

When you've done that, let me know, we will check & give the code

Hi all, 
I have tried applying the CSS code but for some reason, it won't apply. Could there be a CSS conflict? https://www.klimabevaegelsen.dk/

On 9/29/2023 at 5:49 PM, dome23 said:

Hi all, 
I have tried applying the CSS code but for some reason, it won't apply. Could there be a CSS conflict? https://www.klimabevaegelsen.dk/

Use this code then save & reload the page

@media screen and (max-width: 767px) {
    div#block-644a36011b316793a47bd3c3 .summary-item {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin-bottom: 50px !important;
    }
}