Jump to content

Stack summary carousel on mobile

Recommended Posts

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!

Link to comment
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?

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

Link to comment
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;
	}
}

 

Link to comment
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? 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.