Bildgröße - Shop-Produkt anpassen bzw. vergrößern (Template: Miami)

22.12.2021 19:25 (zuletzt bearbeitet: 22.12.2021 19:26)

Burkhazad
#1

Hallo an alle,

ich habe mich extra in diesem Forum angemeldet, da ich nicht weiter komme.

Im Miami-Design bin ich dabei die Shop-Produkte an meiner Bedürfnisse anzupassen. Dies betrifft unter anderem die Höhe des Content-Objektes, wie auch die innerlich Anordnung.

Mein Problem bezieht in diesem Punkt auf die Größe der eingefügten Produktbilder. (Responsive-Design ist im Moment erstmal unwichtig.)

Über die entsprechenden Klassen, mit welchem das Produktbild deklariert ist, gelingt es mich nicht die Größe auf das gewünschte Maß zu bekommen.

1
2
3
 
.cc-shop-product-img
.cc-shop-product-img-confines
.cc-shop-product-main-image photo
 

Diese beeinflussen das Bild maximal in der Höhe. Laut Dev-Tools befindet sich das Bild in einer inline-content-box, deren Größenzuordnung ich aber nicht geändert bekomme.
Hätte dahingehen jemand eine Idee, oder weiß, an welchem Punkt dies zugeordnet und in dem Zusammenhang geändert werden kann?
Ich bin für jede Idee dankbar.

Anbei der CSS-Code für die Änderung des Content "Shop-Produkt" - eine responsive Optimierung ist zu einem späteren Zeitpunkt noch geplant.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<style>
/* <![CDATA[ */
div.j-product {
    max-width: 100%;
    height: auto!important;
}
.cc-m-hgrid-column .n {
    padding: 5px;
        padding-top: 5px;
        width: 100%;
}
.cc-shop-product-img{
    height:250px;
    width:600px;
}
.cc-shop-product-main-image.photo{
    max-height:300px;
    max-Width:500px;
}
h4.fn {
    font-size: 30px!important;
    margin-left: -750px;
}
.cc-shop-product-desc{
    position: static;
    left:350px;
}
.description {
    /*margin-left:400px;*/
    font-size: 14px;
    line-height:1,1;
}
.cc-shop-product-price-current {
    margin-left: 400px;
    margin-top: -200px;
}
.cc-product-tax-and-shipping-info {
    margin-left: 400px;
    line-height: 1!important;
}
.cc-shop-product-availability{
    margin-left: 400px;
}
.cc-shop-addtocard {
     margin-left: 400px!important;
/*]]>*/
</style>
 

Vielen Dank für eure Unterstützung.

Antworten

Beitrag melden

27.12.2021 19:30 (zuletzt bearbeitet: 27.12.2021 19:31)

Burkhazad
#2

Burkhazad

Hallo an alle,
ich hoffe ihr hattet ein besinnliches Weihnachtsfest.

Da ich leider nicht auf eine Lösung gekommen bin, habe ich den Vorschlag, welcher hier im Forum existiert, für meine Zwecke "missbraucht"
Eine Anpassung / Lösung für die Mobile Ansicht ist auch eingearbeitet.

Falls dies mal jemand benutzen möchte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 

/* Variante mit Galerie und SHOP-Produkt */
/* Shop-Produktbild ausblenden*/
@media (min-width: 1281px)
{
.cc-shop-product-img {
    display: none;
}
.cc-shop-product-availability{
    margin-left: 500px;
}
.cc-shop-addtocard {
     margin-left: 500px!important;
     top: -100px!important;
}
.cc-product-tax-and-shipping-info {
    margin-left: 500px;
    line-height: 1!important;
}
.cc-shop-product-price-current {
    margin-left: 500px!important;
    margin-top: -150px!important;
}
h4.fn {
    font-size: 30px!important;
    margin-left: -350px;
}
.description {
    font-size: 14px;
}
}
@media only screen and (max-width: 1280px)
{
cc-m-gallery-container {
    display: none;
}
.cc-m-gallery-slider {
    display: none;
}
.cc-m-gallery-slider-fullscreen-enabled{
    display: none;
}
}
 
 

Bei einer Mindestbreite von 1281px wird das Shop-Produktbild ausgeblendet und die Galerie kommt zum tragen. Ein Produktbild sollte aber zwingend für die Produktübersicht und für die mobile Ansicht eingefügt werden.
Bis zu einer Breite von 1280px wird die Galerie ausgeblendet und das normale Produktbild wird verwendet.

Vielleicht konnte ich damit jemandem weiterhelfen.

Gruß