Jump to content

Mobile: Headline Carousel Section - Show overlap

Recommended Posts

Site URL: https://something-blog.squarespace.com/

Question for mobile optimization on Headline Carousel Section:

ON MOBILE,  I am trying to center align the content of Headline Carousel Section (.user-items-list-carousel)  and show adjacent slides with .5 opacity. the carousel is center aligned on desktop, but on mobile, i was only able to get it to span full width of viewport. I don't know what the name for ACTIVE SLIDE IN VIEW so please can someone help?

 

Please, refer to attached mockup of the UX I'm trying to achieve.

Thank you so much! 

 

Website: --->  https://something-blog.squarespace.com/

Password: ---> demo

 

 

Screen Shot 2021-12-20 at 6.31.45 PM.png

Link to comment
  • Replies 11
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...
On 12/24/2021 at 7:01 PM, tuanphan said:

You mean

  • Reduce with of middle item
  • Make sure item 1 - item 3 appears a little bit

Is there anything else?

@tuanphan I apologize, I'm not familiar with editing custom CSS. Do you mind helping me know what to paste into the edit box in order to achieve the result OP was hoping for?

Edited by brittanya01
Link to comment
On 2/8/2022 at 12:18 PM, brittanya01 said:

@tuanphan I apologize, I'm not familiar with editing custom CSS. Do you mind helping me know what to paste into the edit box in order to achieve the result OP was hoping for?

Hi. What is your problem? Can you share link to page where you have problem?

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
On 2/16/2022 at 9:54 AM, macattack said:

I would love know how to do this as well and have the exact same question as sanfranciscosasha 

 

You mean

  • Reduce with of middle item
  • Make sure item 1 - item 3 appears a little bit

Can you share link to your site? We can check easier

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
  • 3 weeks later...
  • 1 year later...
On 1/27/2024 at 2:07 AM, jack2 said:

I would also like to create the same gallary effect in the following website and show adjacent slides with .5 opacity. in the carousel. Could you please send the CSS code to do that?

https://armadillo-alpaca-ztz4.squarespace.com

password: Daph-01

Scherm­afbeelding 2024-01-26 om 20.06.37.png

Can you share link to this page?

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

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.