Video Pages - stack categories

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. 

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. 

Can you share your URL site?

14 hours ago, Beyondspace said:

Can you share your URL site?

www.igroomhub.com.au/microbites

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;
}
}

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:

many thanks @tuanphan!

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 @tuanphanWe seem to still have this huge gap at the top!? Any ideas around it?

Can you check it again? Now it requires to login to access content