Visual adjustments and whitespaces

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/

Can you share link to a product? We can check easier

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...

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;
}
}

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...

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?

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. 🙏🏻

On 1/22/2024 at 11:21 PM, tilegore said:

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

I see it already fine