gelöst Kategorie Text mittig ausrichten ?

Hallo,
hab zum Thema Kategorie ausrichten nur Artikel Bilder und ähnliches gefunden.

Ich habe im Header "Kategorie" links und "Content" rechts wie vorgegeben.
1, Nun ist der "Content" (Kontakt/über uns) gut mittig, beim Auswahl "über uns" ist der Text nicht mittig.
2, Die Kategorien (links) sind nicht mittig vom grauen Balken, und bei der Auswahl kleben die auch zu weit rechts.

Könnt ihr mir da helfen?

https://lcgambio.binbaff.de/

 

Versuchs mal mit dem folgenden CSS-Code:

Code:

#header #categories .navbar-collapse .navbar-categories ul.navbar-nav > li a {
padding: 12px 15px !important;
}

.navbar-collapse .navbar-categories ul.navbar-nav {
padding-left: 0px !important;
}

So fügst Du einen CSS Code hinzu:
Theme bearbeiten > im SE oben auf die drei Punkte > CSS Code einfügen und abspeichern.

 

Wouw....
bin jetzt bisschen begeistert ;-)
super Klasse.

Bleibt das beim Update auch so?
Weißt du warum das nicht von Anfang an passt?

 

Freut mich

Ja, in der Regel werden die CSS-Klassen bei Updates nicht geändert. Zumindest hatte ich in den letzten 2 Jahren nur ein einziges Mal unerwartet Probleme, weil eine Klasse, die ich in meinen CSS verwendete weggefallen war. Ist aber auch keine große Sache, lässt sich alles beheben.

Habe mir grad mal den Demoshop von datablue angeschaut, da gibt es das "Problem" tatsächlich auch schon. Nur fällt es nicht auf, weil beim hovern etc keine andere Background-color festgelegt ist als im restlichen Shop, also weiß.

 

Danke für deine nach forschenden Art.
Also liegt es an "Datablue" wenn ich Gambio Design wählen würde, wäre es nicht?

 

Diesen Fehler gibt es im Malibu Theme z.B. nicht, dafür aber zig andere. Alle Themes haben zweifelsohne Optimierungsbedarf. Ich habe z.B. insgesamt 2023 Zeilen CSS, um mein Theme so zu gestalten, dass alle Schönheitsfehler weg sind und (subjektiv) sogar noch schöner an sich.

Was ich sagen will ist, wenn Du das Datablue Theme schön findest, solltest Du es definitiv behalten. Fehler findest Du überall und die lassen sich schnell beheben, dafür ist das Forum mit all den engagierten Helfern da.

 

Hallo nochmal,

wenn ich den Shop nicht einrahme "eingerahmter Shop" im Layout, kann ich den Banner feststellen.
Aber dann, kann man ihn wieder hin und her schieben.
gibt es da auch noch ein Trick.

Also Header fixiert, eingerahmt und nicht links und rechts nicht verschiebbar am Smartphone.

 

Moin,

in der Konsole konnte ich das Problem mit dem folgenden Code lösen:

Code:

#wrapper {
padding-right: 0px !important;
padding-left: 0px !important;
}
.row {
margin-right: 0px !important;
margin-left: 0px !important;
}

 

Moin,
das ändert leider nichts bei mir,
Ich habe folgendes stehen.

(für das ausrichten der Kategorie)

#header #categories .navbar-collapse .navbar-categories ul.navbar-nav > li a {
padding: 12px 15px !important;
}

.navbar-collapse .navbar-categories ul.navbar-nav {
padding-left: 0px !important;
}

(das der Shop nicht links bewegt werden kann)

.footer-bottom .db_copyright .row {
margin-right: 0;
margin-left: 0;
}

 

Versuchs mal nur mit dem zweiten Teil des Codes
Also

Code:

.row {
margin-right: 0px !important;
margin-left: 0px !important;
}

Das reicht in der Konsole schon, dass sich auf Mobil die Seite nicht mehr verschieben lässt.
Füg den Code nochmal hinzu gem Beitrag 2 und schau dir die Seite mal live an, nicht im SE. Manche CSS Änderungen sieht man seltsamerweise nicht im SE sondern nur im Liveshop.

 

Hallo,
vielen danl für die Inspiration echt klasse probiere gerne alles aus.

ich schau immer nochmal übers Samrtphone.

dein Code passt soweit, nur ist nun der Warenkorb und die Suche nicht mehr oben. Sondern überlagert denn ersten Teaser

 

Das kann man über die Grid-Einstellungen optimieren, kann gleich mal schauen, wie man die ändert.
Aber welches Smartphone ist das denn? Ich sehe da keine Überlagerung, wenn ich in der Console bei einer Dimension 361x667 prüfe, was deutlich kleiner als das iPhone 12/13 mini wäre. Ich wusste gar nicht, dass es noch kleiner geht.

 

Ich habe eigentlich normal Große Handys,
Pixel 4, 4a, 6 xl.

 

320px noch häufig unterwegs.

Google prüft auch mit 320px, vielleicht auch mit noch anderen Smartphone-Dimensionen.

Aber, definitiv auch mit 320px.

Und dann kommt unter Umständen: "Seite ist auf Mobilgeräten nicht nutzbar"

Auch wenn bei einer Breite von 360px kein Scrollbalken auf dem Smartphone erkennbar ist und er nur bei 320px auftritt, sollte man das aus obigen Grund vermeiden.

 

Sollte mann das " !Important; " wieder raus nehmen?

 

Nö, warum?

!important setzt doch nur die Priorität der Anweisung hoch. Falls eigenes CSS in der Kaskade überlagert wird oder ein Inline-Style Dein Style überdeckt, kann man das mit !important umgehen.

Ich habe mir Deine Seite auf einem Smartphone (320px) und im Chrom am PC (320px) angesehen - ich sehe da keinen Scrollbalken mehr.

Wo siehst Du denn noch einen?

@Edit: Hab's nochmal getestet: Wenn Du die beiden !important raus nimmst, ist der Scrollbalken wieder da.

 

Hallo Bernd,

der Scrollbalken ist weg, die Lupe und der Warenkorb ist nun auf dem ersten Teaser

 

Roland,

versuch mal:

@media screen and (max-width: 375px) {
#stage #slider .swiper-container {
z-index: 10000;
}
}

 

Damit wäre der Warenkorb und die Lupe dann hinter dem Teaser und somit hier nicht mehr erreichbar.
Das Problem ist auch nicht nur auf der Startseite, sondern auf allen Seiten.
Das Logo ist zu breit, deshalb haben die Lupe und der Warenkorb auf kleinen Geräten nicht genug Platz und rutschen eine Reihe nach unten.

 

Wenn man auf das Hamburger-Menü-Symbol klickt wären sie wieder erreichbar - aber nur ab 260px.

Du hast recht - betrifft alle Seiten. Das funktioniert dann so nicht, wie ich es gedacht hatte.
Ich denke auch, so wie Du es sagtest, es ist besser, das Problem bei der Wurzel zu packen, in diesem Fall den den Focus auf den Header zu legen.