Jump to content

How can I force 3 rows on mobile for carousel view?

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

6 hours ago, ThisWayToFabulous said:

Attached is the desktop vs mobile. I’m trying to get mobile to show 3 rows across too.

(Ignore the repeat of images, I just haven’t inputted all of them yet)

DFEE9848-F112-4C2A-B5BF-61637E336780.png

3AC593A5-9AC8-4AB8-A939-31D642B1E40B.png

Kindly share your site with the protected password to check it together

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
51 minutes ago, ThisWayToFabulous said:

@bangank36 no password, just a temp link for now while being built.

star-buffalo-56ld.squarespace.com

I've tried but your site is private now, kindly give it a protected password and share it with us to check your issue

image.thumb.png.b0f10e77511bfe82731a0911a8705550.png

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@ThisWayToFabulous Add to Design > Custom CSS > Then save & reload the site

/* Homepage Mobile Carousel */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] ul {
    grid-template-columns: repeat(3,1fr) !important;
}
.user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] h2 {
    font-size: 17px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 12/1/2021 at 8:11 PM, ThisWayToFabulous said:

@tuanphan thank you!! This is a huge help.

Is there a way to better shrink all of the items proportionally? So the caption and buttons also size down?

IMG_6904.PNG

Use this new code

/* Homepage Mobile Carousel */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] {
ul {
    grid-template-columns: repeat(3,1fr) !important;
}
h2 {
    font-size: 17px !important;
}
a.list-item-content__button {
    font-size: 8px !important;
}}
}

image.thumb.png.7d677492daaa35832972ad709944863e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 12/6/2021 at 9:22 AM, ThisWayToFabulous said:

@tuanphan thank you!!!!

One more level of this, im so sorry!

  • How can i specifically shrink the "makeup artist" part of the text? 
  • Also, can i make the pink button "meet the team" also shrink to one line?
  • Can i make the "magic behind the brushes" title also shrink down to only one line?

Screenshot 2021-12-05 at 8.22.01 PM.jpeg

Sorry for delay. Use this new CSS

/* Homepage Mobile Carousel */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] {
ul {
    grid-template-columns: repeat(3,1fr) !important;
}
/* title */
h2 {
    font-size: 17px !important;
}
/* makeup artist */
.list-item-content__description * {
    font-size: 14px;
}
/* the magic behind */
.list-section-title p {
    white-space: nowrap !important;
    font-size: 16px;
}
a.list-item-content__button {
    font-size: 8px !important;
}}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.