Jump to content

Need code to show 1 column on category pages in mobile

Recommended Posts

I'm currently building my website (I have an access PW if someone wants to look at it), and I can't figure out how to have the mobile version display single columns for category pages. A screenshot is attached. 

 

Here's how I'm setting it all up:
 

  • I have a print store for all of my products (I'm a photographer selling prints). This includes all the product photos, descriptions and pricing that ultimately shows on my product pages. This works like a charm.
  • I have portfolio page as my home page, and it shows has one photo for each category that is linked to a category page. Example, when you click on the "Best Sellers" photo on the home page, it opens a category page with all my prints that are tagged with "best sellers."
  • The resulting category page is what I'm having trouble with: It looks great on the desktop, but as you can see on the screenshot the mobile looks awful because it's showing 3 columns. The images are tiny.
  • Also, I would love to have this category page only show the photo, the product title and the pricing (no descriptions).
  • Clicking on a photo in this category page takes you to the product for that photo, with all the description and ordering functionality.

I know there has to be a code to make this work well. Any thoughts?

Screenshot 2024-01-13 at 4.30.15 PM.png

Edited by ACPhotos
Link to comment
  • Replies 4
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

19 hours ago, ACPhotos said:

andycrawfordphotography.com

Password: 10zlL&Wx3#8

You can use this code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
body.collection-659ed54cb8004b1e1a7bf395.view-item {
.summary-item-list {
    height: auto !important;
}
.summary-item {
    position: relative !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    width: 100% !important;
}}}

image.thumb.png.575576f8565f1a306206687ec760eff1.png

Edited by tuanphan

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you. That worked, sort of. 

Unfortunately, I've found the entire Squarespace system difficult to work with - and the mobile version of the site was a complete disaster. 

So I've canceled my subscription. Not worth the stress.

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.