Produkt Bilder/Text Ansicht -> Listenansicht

Hallo
brauche wieder etwas Hilfe )

Ich möchte gerne meine Produktbilder in der kachelansicht ändern. was ich auch getan habe.
Im Firebug habe ich die Schrift nach rechts verschoben was auch gut aussieht..
wie hier...


wenn ich dann den css code in den editor kopiere sieht es so aus:



Und wenn ich dann noch in die Kachelansicht wechsle, sieht es so aus.



Kann man das beheben? Wenn wie?
Herzlichen Dank und lg Steffi

 

Du hast die Bilder generell breiter gemacht, ohne den Rest anzupassen.
Um Dir das helfen zu können braucht man einen Link zur Baustelle, damit man sich das css der einzelnen Bereiche genau ansehen kann

 

Hallo Barbara
der Shop ist jetzt online untern fiebmatz.de

Hilft das?

Herzlichen Dank und lg Steffi

 

Ich schau mal.

 

Bevor der (Test-)Shop online geht.

1. In das Gratis Impressum würde ich mal den ODR Link reinschreiben.
2. §36 VSBG sollte ggf. auch mal gelesen werden.
3. Ich würde mich auch belesen, unter welchen Bedingungen Zahlartengebühren auf den Kunden umgelegt werden dürfen ... ohne sich der Gefahr einer Abmahnung auszusetzen.
4. Man sollte sich einig sein, ob nun ab 100 EUR oder ab 120 EUR versandkostenfrei geliefert wird.

 

Hallo
ja das ist jetzt alles erstmal nur grob gemacht, das wird alles noch vernüftig gemacht.
erstmal Design und dann alles weitere

 

Zunächst mal:
wenn Du die Höhe mit 95% und die Breite mit 200% festlegst, verzerrst Du die Bilder.
Stelle das wieder zurück auf max-Werte von je 100%
Um die Bilder breiter zu machen:

Code:

@media (min-width: 1200px){
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
    width: 33.333%;
}}
@media (min-width: 992px){
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
    width: 33.333%;
}}
.inside .content-container .content-container-inner .image .product-image img {
   left: 10%;

Dann muss natürlich der Text schmaler:

Code:

@media (min-width: 1200px){
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
    width: 33.333%;
}}
@media (min-width: 992px){
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
    width: 33.333%;
}}

Damit sollte es in der Liste so aussehen:


Dann sind die Kacheln auch wieder richtig.

 

Muss das @media mit rein kopiert werden?

 

ja

 

Funktioniert nicht.
Das hab ich jetzt..

.product-container .inside .content-container .content-container-inner .image .product-image img {
left: 50%;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
transform: translateX(-10%) translateY(-50%);
}
.product-container .inside .content-container .content-container-inner .image .product-image img {
height: 100%;
width: 100%;
}

.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
display: table-cell;
float: right;
height: 100%;
vertical-align: top;
}

@media (min-width: 1200px){
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
width: 33.333%;
}}
@media (min-width: 992px){
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .image {
width: 33.333%;
}}
.inside .content-container .content-container-inner .image .product-image img {
left: 10%;

@media (min-width: 1200px){
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
width: 33.333%;
}}
@media (min-width: 992px){
.productlist-viewmode-list .product-container .inside .content-container .content-container-inner .title-description {
width: 33.333%;
}}

 

Nimm mal das alte, das Du eingetragen hattest, raus bitte

 

hinter 10% fehlt eine Klammer.

Nur die Schrift ist jetzt noch auf den Bildern...

 

Achja jetzt klappts..jetzt siehts super aus!

 

Danke nochmal

 

stimmt, sorry.