Jump to content

Summary Block in Desktop and Mobile Versions

Go to solution Solved by tuanphan,

Recommended Posts

Hi friends! I'm trying to tweak a summary block for both desktop and mobile (check the link - "Watch More" carousel, password: 7u5PY6B6C). For the desktop, I want a seamless carousel without borders, similar to the one at the bottom of the page (see the reference/attached screenshot).

Now, on mobile, the thumbnails are tiny, and the text is all over the place (screenshot is attached). Any way to show just one thumbnail instead of two?

If you've got any tips on how to make this happen, I'd really appreciate your help! Thanks a bunch! 🙌

carousel reference for desktop.png

summary block on mobile.png

Edited by maya_m
Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

@tuanphan Thank you so much for your answer! I'd better hide it from mobile then. I used this code but it didn't work well (still see some parts of the text - screenshot attached):

//REMOVE SUMMARY BLOCK FROM MOBILE//
@media only screen and (max-width:767px) {.sqs-block-summary-v2 .summary-thumbnail-container.sqs-gallery-image-container {display: none;}
}

@media only screen and (max-width:767px)
{.sqs-block-summary-v2 .summary-header-text {display: none;}
}

@media only screen and (max-width:767px)
{.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {display: none;}
  }

Also, is there a chance to reduce the spacing in the place where it was supposed to be the summary block?

Many thanks!

image.png

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.