Stack summary carousel on mobile

I am wondering if anyone has a way that the excerpts in my blog summary (the " What our clients say…" section) can show stacked on top of each other in mobile view? Two columns on mobile view looks too squished! Would welcome any suggestions!

The link to the page is: https://www.kweststudio.com.au/about

On 10/7/2021 at 12:45 PM, karawr said:

The link to the page is: https://www.kweststudio.com.au/about

Hi,

You can add one more summary (sumarry 2, set 1 item/row) under current (summary 1)

• we will give the code the hide summary 2 on desktop, show summary 1 only
• we will give the code to hide summary 1 on mobile, show summary 2 only

What do you think?

15 hours ago, tuanphan said:

Hi,

You can add one more summary (sumarry 2, set 1 item/row) under current (summary 1)

• we will give the code the hide summary 2 on desktop, show summary 1 only
• we will give the code to hide summary 1 on mobile, show summary 2 only

What do you think?

Yes thank you, that would work for me!

On 10/10/2021 at 6:33 AM, karawr said:

Yes thank you, that would work for me!

You can add 2 summaries  first, then we can check their code easier

56 minutes ago, tuanphan said:

You can add 2 summaries  first, then we can check their code easier

I've added the 2 summaries.

On 10/12/2021 at 12:32 PM, tuanphan said:

You can add 2 summaries  first, then we can check their code easier

Let me know if you need any more info 🙂

On 10/12/2021 at 12:32 PM, tuanphan said:

You can add 2 summaries  first, then we can check their code easier

I tried this code but it didn't work unfortunately.

/* Hide this on Mobile */
@media screen and (max-width:767px) {
	[data-section-id="#block-yui_3_17_2_1_1633431612221_11185"] {
		display: none;
	}
}
/* Hide this on Tablet - Desktop */
@media screen and (min-width:768px) {
	[data-section-id="#block-yui_3_17_2_1_1634009578077_3559"] {
		display: none;
	}
}

On 10/12/2021 at 12:32 PM, tuanphan said:

You can add 2 summaries  first, then we can check their code easier

I think I've solved it with this code:

/* hide testimonials mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1633431612221_11185 {
    display: none;
}
}

/* hide testimonials desktop */
@media screen and (min-width:641px) {
div#block-yui_3_17_2_1_1634009578077_3559 {
    display: none;
	}
}

Can you please double-check it works OK if you get the chance? 🙂