Jump to content

Column Breite auf Tablets von 100% auf 50%


Fashionresidenz

Recommended Posts

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

post-739759-0-15655600-1469443324_thumb.jpg

post-739759-0-88755500-1469443339_thumb.jpg

Link to comment
Share on other sites

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: post-407990-0-58249000-1469514165_thumb.jpg

 

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?

Link to comment
Share on other sites

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):  post-739759-0-31357400-1469517568_thumb.jpg

 

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...