Un utente ha chiesto informazioni su Storefront di Wordpress

rimuovere lo spazio vuoto

Un utente ha chiesto 👇

Ciao, c’è un modo per rimuovere lo spazio contrassegnato in rosso?

Immagine dello schermo:
https://www.rd-service.se/wp-content/uploads/2018/11/space.jpg

(@ torres126)

2 anni, 4 mesi fa

Ciao,

Certo, questo dovrebbe essere fatto con la SEC. La seguente SEC dovrebbe dare questo effetto: https://prnt.sc/liar4y

main # main.site-main {
margine superiore: -10%;
}

Questo CSS è lì per spostare la barra laterale un po ‘più in alto, in modo da ottenere qualcosa di simile mentre usi anche l’altro bit di CSS sopra: https://prnt.sc/liark4

# secondary.widget-area {
margine superiore: -3,5%;
}

Puoi modificare il valore in base alle tue esigenze. Fammi sapere se per te va bene. 🙂

(@jobthomas)

Ingegnere della felicità di Automattic

2 anni, 4 mesi fa

Grazie per questo @ torres126

@redingeservice. Puoi inviare questo codice Personalizza> CSS aggiuntivo. Aggiorna un po ‘. Innanzitutto, voglio evitare gli ID (a partire da # usa semplicemente le classi .). Sulla base della tua richiesta iniziale, non vedo alcun motivo per aggiungere ID.

In secondo luogo, vedo che hai già aggiunto un altro codice per nasconderlo, quindi lo contrassegnerò come risolto.

Se desideri saperne di più sui CSS, consiglio vivamente il tutorial gratuiti su w3schools. Qui puoi trovare le basi di selettori (come concentrarsi sull’aspetto giusto della pagina) e proprietà (come cambiare l’elemento nella pagina).

Lanciatore di thread

(@redingeservice)

2 anni, 4 mesi fa

Ciao, grazie per le tue risposte, ho provato la soluzione torres126 ed era perfetta fino a quando non ho aggiunto un prodotto al grafico, quindi è sembrato:

https://www.rd-service.se/wp-content/uploads/2018/11/cart.jpg

(@jobthomas)

Ingegnere della felicità di Automattic

2 anni, 4 mesi fa

Sono felice di dare un’altra occhiata, ma sarebbe più facile se disattivi tutti i CSS personalizzati già attivi. Fammi sapere quando sarà e ti darò un po ‘di CSS da provare.

Lanciatore di thread

(@redingeservice)

2 anni, 4 mesi fa

Grazie, ho rimosso tutti i CSS ora.

questo era il CSS che ho usato.

/ * cambia il colore delle caselle dei messaggi (come i coupon o il cliente di ritorno) sull’assegno / carrello * /
.woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments {
colore di sfondo: # 666666! importante;

}
.woocommerce-demo-store .demo_store {
colore di sfondo: # 666666;
}

footer .site-info {display: nessuno; }

input.search-field {
display: nessuno;
}

.sd-max-width.sd-header-sticky .site-header {max-width: 100%;}
.site-search {display: none;}

# masthead.site-header {
imbottitura: 15px;
}

/ * Dimensioni del logo per il sito per dispositivi mobili * /
@media screen e (larghezza massima: 768 px) {
.site-header .site-branding img {
altezza massima: una! importante;
larghezza massima: nessuna! importante;
larghezza: 100%! importante;
}
}

/ * Dimensioni del logo per il sito desktop * /
@media screen e (larghezza minima: 768 px) {
.site-header .site-branding img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
altezza: automatica;
altezza massima: un’estremità;
larghezza massima: una;
larghezza: 350 px! importante;
}
}

.aggeggio {
imbottitura fondo: 5px;
bordo inferiore: 5px;
margine inferiore: 5px;
margine superiore: -20 px;
}

div.content-area {margin-top: -20px! importante;}

.header_color .cart_dropdown .dropdown_widget .widget_shopping_cart_content {
sfondo: #fff! importante;
colore: # 000;
}

#customer_details, #order_review_heading, #order_review {
galleggiante: nessuno;
larghezza: automatica;
}

.widget-area .widget a: not (.button) {
decorazione del testo: nessuno! importante;
}

ul.products li.product {
larghezza: 46,411765%;
galleggiante: sinistra;
margine destro: 5,8823529412%;
}

ul.products li.product: nth-of-type (2n) {
margine destro: 0;
}

@media (larghezza minima: 768 px) {
ul.products li.product: nth-of-type (2n) {
margine destro: 5,8823529412%;
}
}

main # main.site-main {
margine superiore: -5%;
}

# secondary.widget-area {
margine superiore: -3%;
}

(@jobthomas)

Ingegnere della felicità di Automattic

2 anni, 4 mesi fa

Grazie per quello. Invece delle ultime righe suggerite. Se questo è fatto, fai il trucco:

/* Reduce space below the breadcrumbs */

@media (min-width: 768px) {
    .woocommerce-breadcrumb {
        margin-bottom: 0;
    }
    .site-content>.col-full>.woocommerce>.woocommerce-error:first-child, 
    .site-content>.col-full>.woocommerce>.woocommerce-info:first-child, 
    .site-content>.col-full>.woocommerce>.woocommerce-message:first-child {
        margin-top: 0;
    }
}

Lanciatore di thread

(@redingeservice)

2 anni, 4 mesi fa

grazie, ma quando uso quel codice non vedo alcun cambiamento?

(@jobthomas)

Ingegnere della felicità di Automattic

2 anni, 4 mesi fa

Hai cancellato il codice dato in precedenza, perché qui funziona perfettamente?

Ecco uno screening della mia vita applicando questo codice al tuo sito web:

Link all’immagine: http://cld.wthms.co/LlXU2s

Lanciatore di thread

(@redingeservice)

2 anni, 4 mesi fa

grazie, ho guardato solo la prima pagina, ho lavorato quando hai cliccato su qualche prodotto.

Grazie ancora.

(@jobthomas)

Ingegnere della felicità di Automattic

2 anni, 4 mesi fa

È bello sentirlo. Passa un buon fine settimana. 👋

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *