Jump to content

Visual adjustments and whitespaces

Recommended Posts

Hi guys... 🙂

I'm looking for help with some visual adjustments to my webstore.

Basically I would like to reduce the space between page titles in the navigation menu and also the white spaces on article pages in the store (both for desktop and mobile viewing). And finally, I wanted to be able to leave the login and cart icons outside the hamburger menu, that is, they would be in the top right corner and the hamburger menu in the top left corner. (I send exemplifying images).

I appreciate any help with the codes and I'll try to make the adjustments... 🙏🏻

https://dextersupplier.squarespace.com/

 

WhatsApp Image 2024-01-12 at 19.11.46.jpeg

WhatsApp Image 2024-01-12 at 19.10.00.jpeg

WhatsApp Image 2024-01-12 at 19.06.25.jpeg

Link to comment
  • Replies 7
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

On 1/16/2024 at 3:06 AM, tilegore said:

Hey @tuanphan , thanks for the reply... 🙏

Below is the link to the prinscreen example:

https://www.dextersupplier.com/barbershop-and-salon/clippers-and-trimmers/fxflfs2e-uvfoil02-shaver-uv-double-foil-babyliss-pro

If you browse the menus there are dozens of pages and thousands of articles...

Thanks...

Use this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
/* space between breadcrumb - proximo */
.ProductItem-nav-breadcrumb {
    margin-bottom: 0px !important;
}
/* space between proximo - title */
nav.ProductItem-nav {
    padding-bottom: 0px !important;
}
/* space title - reviews */
h1.ProductItem-details-title {
    margin-bottom: 0px !important;
}
a.summaryLink p {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

div.sqs-add-to-cart-button-wrapper {
    margin-bottom: 0px !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
2 horas atrás, tuanphan disse:

Use este código para Ferramentas do Site (em Não Vinculado) > CSS Personalizado

@tela de mídia e (largura máxima:767px) { /* espaço entre a farinha de rosca - proximo */ . ProductItem-nav-breadcrumb { margem-inferior: 0px ! importante; } /* espaço entre proximo - título */ nav.ProductItem-nav { fundo de preenchimento: 0px ! importante; } /* título do espaço - avaliações */ h1. ProductItem-details-title { margem-inferior: 0px ! importante; } a.summaryLink p { margem-top: 0px ! importante; margem-inferior: 0px ! importante; } div.sqs-add-to-cart-button-wrapper { margem-inferior: 0px ! importante; } }

 

Hello @tuanphan, thanks for the codes. 🙏

I've already made some adjustments and it's improved a lot... Could you also help me remove the spaces between the footer titles and with the hamburger menu adjustments that I mentioned in the first post? 

Thanks for all...

Link to comment

Use this code under

@media screen and (max-width:767px) {
/* space under add to cart */
div.ProductItem-details-excerpt p:first-child {
    margin-top: 2px;
    margin-bottom: 2px;
}
/* vertical space */
.overlay-nav-wrapper {
    margin-top: 0 !important;
}
}

Top left: Which exact position?

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
On 1/20/2024 at 4:20 AM, tuanphan said:

Use this code under

@media screen and (max-width:767px) {
/* space under add to cart */
div.ProductItem-details-excerpt p:first-child {
    margin-top: 2px;
    margin-bottom: 2px;
}
/* vertical space */
.overlay-nav-wrapper {
    margin-top: 0 !important;
}
}

Top left: Which exact position?

Sorry @tuanphan, I meant in the top right corner. I edited the image to better suggest the idea. 🙏🏻

1.png

2.png

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.