Jump to content

Category text cropping in Mobile view & How to make subcategories

Go to solution Solved by Beyondspace,

Recommended Posts

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

Hello! 🙂

I come to a problem in mobile view. It seems that the text is cropped and is not showing all the categories. 901017761_Screenshot2022-03-22155213.png.7c3a133fee1b61c710f80c5b7fb732ec.png

I used this code and it made the products 2 per row, which is good, but the text is cropped

@media screen and ( max-width: 575px) {.products.collection-content-wrapper .nested-category-children {
  overflow-x: unset !important;
  justify-content: center;
  }
}

If I eliminate code, the products will be put in 1 per row and the categories will have a horizontal scrollbar. Which both I don't want. I wanna still have my products 2 per row and for the categories to show all without a horizontal scrollbar. Is there a code that can help me?

---------

On another note, can I make a sidebar menu (for both mobile and desktop view) likes this490255988_Screenshot2022-03-23133938.png.c7e7ad89fe047422ea7d2f23a3eaffa2.png

But every page of the categories the subcategories changes. Ex: When you press "Art on wall" the categories will be "Orientation", "Material" etc. but when you go to "Art on bodies" the categories will change to "Bracelets", "Earrings" etc. It will help me a lot if someone can help me on this one. Thanks!

Edited by GatheredByArt
Link to comment
  • GatheredByArt changed the title to Category text cropping in Mobile view & How to make subcategories
  • Solution
On 3/24/2022 at 3:40 AM, GatheredByArt said:

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

Hello! 🙂

I come to a problem in mobile view. It seems that the text is cropped and is not showing all the categories. 901017761_Screenshot2022-03-22155213.png.7c3a133fee1b61c710f80c5b7fb732ec.png

I used this code and it made the products 2 per row, which is good, but the text is cropped

@media screen and ( max-width: 575px) {.products.collection-content-wrapper .nested-category-children {
  overflow-x: unset !important;
  justify-content: center;
  }
}

If I eliminate code, the products will be put in 1 per row and the categories will have a horizontal scrollbar. Which both I don't want. I wanna still have my products 2 per row and for the categories to show all without a horizontal scrollbar. Is there a code that can help me?

---------

On another note, can I make a sidebar menu (for both mobile and desktop view) likes this490255988_Screenshot2022-03-23133938.png.c7e7ad89fe047422ea7d2f23a3eaffa2.png

But every page of the categories the subcategories changes. Ex: When you press "Art on wall" the categories will be "Orientation", "Material" etc. but when you go to "Art on bodies" the categories will change to "Bracelets", "Earrings" etc. It will help me a lot if someone can help me on this one. Thanks!

For mobile display, kindly try

@media only screen and (max-width: 767px) {
  .nested-category-children {
    flex-wrap: wrap !important;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

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

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.