Jump to content

Center Align Items on Single Shop Page

Go to solution Solved by tuanphan,

Recommended Posts

I have two shops on my website: one for customers and one in a members' area for dealers who can buy and sell the mailboxes in their stores. I have more items available in the dealer shop than in the customer shop. Is there any way (CSS code maybe) I can center align the customer shop but keep the current alignment in the dealer shop? Or Is there a way to not have the customer shop go full width? I have three items below the shop that you can see on my website. I could move one to the same row as the shop item, but I don't know how to do that.

I found this code in another forum question, but it changes the alignment in both shops:
.list-grid {
    justify-content: center;
    display: flex !important;
}

I attached pictures of the customer shop and dealer shop. The password for the site is websitecodehelp. You can join the members' area if needed. The customer shop page title is Shop, and the dealer shop page title is Dealer Shop.

Thanks for any help!

rr-dealer-shop.jpg

rr-shop.jpg

Edited by crystalk
Link to comment
  • crystalk changed the title to Center Align Items on Single Shop Page
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution
25 minutes ago, crystalk said:

Here is the link to the website https://www.rrmailboxes.com/. Here is the link to the customer shop page https://www.rrmailboxes.com/shop. Here is the link to the dealer shop https://www.rrmailboxes.com/dealer-shop. Thanks in advance for any help!

Add this code to Shop Page Header

<style>
  @media screen and (min-width:768px) {
  .products.collection-content-wrapper .list-grid .grid-item {
    position: relative;
    left: calc(100% + 5vw) !important;
}
  }
</style>

With Dealer Shop Page

I don't see any items. Can you check it again?

 

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

Thanks! That helped the customer shop page but now the dealer shop page is off-center to the right. I had a broken button, so the dealer shop should be fixed now. It's in a members area, so you'll probably need to create an account for it (which is fine). You can use this login info if needed: email - crystal@creativedigitalconnections.com, password- T3stM3mber_2145!*

Link to comment
5 minutes ago, crystalk said:

Thanks! That helped the customer shop page but now the dealer shop page is off-center to the right. I had a broken button, so the dealer shop should be fixed now. It's in a members area, so you'll probably need to create an account for it (which is fine). You can use this login info if needed: email - crystal@creativedigitalconnections.com, password- T3stM3mber_2145!*

#1. Where did you add the code? Add to Shop Page Header, DO NOT add to Site Wide Code Injection Header

#2.

Edited by tuanphan

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
32 minutes ago, crystalk said:

There we go! It helps if I know what I'm doing. I thought I did it right, but clearly I didn't. Now it's looking good. Thank you so much for the help. I really appreciate it!

Did you solve all or still need help?

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.