Jump to content

Video Pages - stack categories

Go to solution Solved by tuanphan,

Recommended Posts

Hello. Could somebody please help me stack the video categories on mobile, just like I have done for our shop page? (grabbed code off web - cannot find for video page). Many thanks in advance. Pics of code used for shop page, and what page looks like now. 

code used.png

store categories stacked.png

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, anna_ said:

Hello. Could somebody please help me stack the video categories on mobile, just like I have done for our shop page? (grabbed code off web - cannot find for video page). Many thanks in advance. Pics of code used for shop page, and what page looks like now. 

code used.png

store categories stacked.png

Can you share your URL site?

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
On 12/17/2022 at 3:56 AM, anna_ said:

www.igroomhub.com.au/microbites

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.nested-category-tree-wrapper ul {
    display: flex !important;
    flex-direction: column !important;
}
.nested-category-tree-wrapper ul a {
    margin-left: 0 !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/21/2022 at 11:47 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.nested-category-tree-wrapper ul {
    display: flex !important;
    flex-direction: column !important;
}
.nested-category-tree-wrapper ul a {
    margin-left: 0 !important;
}
}

 

Thank you!! IS it possible to make it centred, with one category per line and reduce the gap at the top? And get rid of the stick things. This is how it is displaying currently:

cats.png

Edited by anna_
Link to comment
  • Solution
On 12/22/2022 at 9:44 AM, anna_ said:

Thank you!! IS it possible to make it centred, with one category per line and reduce the gap at the top? And get rid of the stick things. This is how it is displaying currently:

cats.png

Hi,

Use this new code

@media screen and (max-width:767px) {
.lessons.collection-content-wrapper .nested-category-tree-wrapper ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 0 !important;
flex-direction: column;
    align-items: center;
}
.nested-category-tree-wrapper ul a {
    margin-left: 0 !important;
}
.nested-category-tree-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
span.breadcrumb-separator {
    display: none !important;
}
.lessons.collection-content-wrapper .nested-category-tree-wrapper ul .category-link {
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
}
li.category-item {
    padding: 0 !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
  • 2 weeks later...
On 12/24/2022 at 6:09 PM, tuanphan said:

Hi,

Use this new code

@media screen and (max-width:767px) {
.lessons.collection-content-wrapper .nested-category-tree-wrapper ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 0 !important;
flex-direction: column;
    align-items: center;
}
.nested-category-tree-wrapper ul a {
    margin-left: 0 !important;
}
.nested-category-tree-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
span.breadcrumb-separator {
    display: none !important;
}
.lessons.collection-content-wrapper .nested-category-tree-wrapper ul .category-link {
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
}
li.category-item {
    padding: 0 !important;
}
}

 

Hi again @tuanphanimage.png.d9a0821fb89fb20608d25d5a4460557e.pngWe seem to still have this huge gap at the top!? Any ideas around it?

 

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.