Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How to convert homepage summary block (carousel) to stacked in mobile view?


Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.vaseconstruction.com

Hi!

I just want to ask if anyone has a CSS code to turn the carousel summary block into stacked mode when viewed on mobile?

Summary block looks fine on desktop view:

1068185837_ScreenShot2021-09-02at3_28_37PM.thumb.png.b73202089fdc2c48acf8d8082104ea8a.png

 

But when switched to mobile it starts with a blank white area, and then slides into 4 thumbnails. Ideally, we wanted this stacked so it looks nice on a small screen.

591939489_ScreenShot2021-09-02at3_28_53PM.png.4e0e09130b2ecac40b0f4d6187f36f79.png50060249_ScreenShot2021-09-02at3_29_07PM.png.bb896c1aa1f862c74b1b9a5beab6df7d.png

 

Thanks to anyone who can help.

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
  • Solution
On 9/17/2021 at 10:42 PM, Aki_0011 said:

Hi @tuanphanits disabled now.

Hi,

Don't remove any code in your current code.

Add this to Design > Custom CSS

/* Stacked homepage summary */
@media screen and (max-width:767px) {
body.homepage .summary-item {
    width: 100% !important;
}
body.homepage .summary-carousel-pager.sqs-gallery-controls {
    display: none;
}
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
21 hours ago, Aki_0011 said:

Thank you so much! It worked! ^__^

PS: How do I get rid of the arrow buttons above the summary block in mobile?

Updated above code

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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