Jump to content

Reduce space on product details page + center mobile menu text

Go to solution Solved by Web_Solutions,

Recommended Posts

Hi!

I would like to reduce some spaces on my product page (especially for the mobile version) :

  • between the header and the image of the product
  • between the bottom of the product image and the title

Also, I noticed that the text on my mobile menu doesn't seem at the center. 

* (see images below)

Is there css codes that could help me with all that?

 

Thank you so much!

Carolanne

image.png

Screen Shot 2023-11-10 at 7.48.41 PM.png

Screen Shot 2023-11-10 at 7.49.10 PM.png

Link to comment
  • Solution
1 hour ago, carolannebourget said:

url of my website: https://aspectgraphite.com/

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

@media screen and (max-width: 767px) {
  .products article.ProductItem {
    padding-top: 0 !important;
  }
  .products article.ProductItem .ProductItem-nav {
    padding: 0 !important;
  }
  .products article.ProductItem .ProductItem-gallery {
    padding-bottom: 0 !important;
  }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
17 minutes ago, carolannebourget said:

It really helped thank you! 

Is there a code to reduce bottom space of the header? I think that's what create a space too on top of my pages.

Also, is there a way to center the text / buttons on my mobile menu?

Thank you!

 

Please replace your logos with below. Because your logo has blank space. I have removed those space.

signature.aspectgraphite.darkbrown.png

signature.aspectgraphite.grey.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
5 hours ago, carolannebourget said:

I've changed the logo on my pages and it worked great! Somehow I can't change the logo on my store page and on my product details page (on desktop now)?

 

Thank you for your help, it's really appreciated!

There you have add the logo by custom code. Can you upload the white logo on your website and send me the link? Then I can provide you the code. 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
On 11/14/2023 at 6:27 AM, carolannebourget said:

Hi! I found the solution regarding the white logo. 

Is there a way to reduce the space of the top of the product details page on desktop? (image below)

Thank you once again! 

Screen Shot 2023-11-13 at 6.25.32 PM.png

You can add this CSS code

.ProductItem .ProductItem-summary {
    align-items: flex-start !important;
}

 

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

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.