Column Breite auf Tablets von 100% auf 50%

[Fashionresidenz]

Hallo liebe Community,

 

ich habe ein Anliegen und zwar hätte ich auf der Produktseite gerne die Spaltenbreite geändernt, es ist so dass meine Produktseite aus 3 Spalten besteht (links = Bilder, center = Warenkorbfeld, recht = Produktbeschreibung.

 

Auf Desktops ist die Spaltenbreite bei 50% und somit werden die Bilder links angezeigt, das Warenkorbfeld rechts daneben und dadrunter die Produktbeschreibung. So soll es auch auf Tablets sein.

 

Hier ist die Spaltenbreite allerdings standartmäßig auf 100%, sprich jede Spalte wird untereinander angezeigt, nun habe ich die Breite auf 50% geändert in der product.tpl, sie sind auch schmaler geworden, allerdings werden Sie noch immer untereinander angezeigt und nicht die linke und mittige nebeneinander. woran liegt das?

 

Habe euch mal zwei Screenshots angehangen, auf dem einen wie es sein soll und auf dem anderen wie es gerade ist.

 

Vielleicht hat ja jemand eine Idee

Viele Grüße
Lucas

[dddirk]

Vermutlich haben deine Spalten noch ein Padding - welches sich auf die 50% addiert.

 

Also mal "padding=0" dazu schreiben oder etwas wie "width=45%".

[schibulski]

Du hast höchstwahrscheinlich die Breiten direkt per css auf 50% geändert, aber die class bei "col-sm-12" gelassen. Ändere einfach mal in deiner product.tpl die beiden Klassen der div container (pb-left-column und pb-center-column) von "col-sm-12" auf col-sm-6 ab. Ich habe das nur mal im Firefox nachgespielt und es hat auf Anhieb funktioniert. Guckst du Screenshot:

 

Die Klasse ab medium kannst du dann komplett löschen da sich ja ab dort nix mehr ändern soll an der Spaltenbreite. Der Code in der .tpl sollte dann so aussehen:

<div class="pb-left-column col-xs-12 col-sm-6">
.
.
und
.
.
<div class="pb-center-column col-xs-12 col-sm-6">

P.S.: Ist es richtig dass jeder Besucher deines Shops den Theme-Editor zu sehen bekommt?

[Fashionresidenz]

Hey,

 

vielen Dank für eure Antworten, also die Breite habe ich über die TPL geregelt, genau wie du es gesagt hast @ schibulski

Alle small Klassen auf col-sm-6 geändert, aber die anderen Klassen nicht gelöscht, das ganze sieht dann so aus (am iPad getestet): 

 

Hatte es auch schon probiert mit col-sm-5 so dass die Breite unter 50% fällt @ dddirk

Dabei ist die Spalte noch schmaler geworden, die Anordnung aber genauso wie auf dem Screenshot geblieben.

 

Aber das mit dem Padding werde ich noch mal eben überprüfen ^^

 

Viele Grüße
Lucas

[Fashionresidenz]

Und nein das soll ganz und garnicht sein dass jeder Besuche den Theme-Editor sieht @ schibulski :/

Ich bin davon ausgegangen dass nur ich den sehe weil ich ja im Backend eingeloggt bin. Ich danke dir für diese Information, habe das erstmal gehoben