/** * TB-Tools Mobile Produktseite - Preis und Kauf-Button nach oben holen. * * Ziel (Thomas, 24.08.2026): "ich will es fix auf der seite haben machen * wir das bild bisschen kleiner und passen es an dass der preis und der * butten hoch kommt". * * Alle Werte sind am Live-Shop im 390px-Mobil-Layout nachgemessen, nicht * geschaetzt. Ausgangslage auf der Produktseite Nordride VISION 360: * * Kopfbereich (Banner/Header/Breadcrumb) 197 px * Galerie inkl. Thumbnails 355 px * Titel 43 px * SKU/Marken-Block 63 px (vier Zeilen) * Preis 64 px * -> Kauf-Button begann bei 865 px, sichtbar sind 844 px * * Nach diesen Regeln beginnt der Button bei 721 px und endet bei 776 px, * liegt also samt Preis vollstaendig im ersten Bildschirm. Gewinn: 144 px. * * Nur bis 782 px Breite (WordPress-Standard-Breakpoint). Desktop bleibt * unveraendert. */ @media (max-width: 782px) { /* --- 1. Galerie --------------------------------------------------- * Wichtig: Es reicht NICHT, nur das Bild zu begrenzen. Der * flexslider-Viewport behaelt dann seine urspruengliche Hoehe, und * zwischen Bild und Thumbnail-Leiste bleibt eine tote Luecke stehen - * beim ersten Messversuch waren das 71 px, die kein Mensch sieht und * die trotzdem den Button nach unten druecken. Deshalb Container und * Bild gemeinsam begrenzen, und `height: auto`, weil der Slider dem * Viewport per JavaScript eine feste Hoehe setzt. * * `width: auto` und `height: auto` am Bild sind nicht optional: Ohne * sie staucht die max-height das Bild bei fester Breite und das * Seitenverhaeltnis kippt. Beim Testen genau so passiert - das Bild * meldete brav die gewuenschte Hoehe und war in Wahrheit verzerrt. * * min(250px, 30vh): Auf normalen Geraeten greift der feste Wert, auf * niedrigen Bildschirmen (z. B. iPhone SE mit 667 px) der relative - * dort ist jedes Pixel knapp. Bei 390x844 gemessen: Bild 250 px, * Kauf-Button endet bei 808 px, also 36 px Luft. */ .wp-block-woocommerce-product-image-gallery .flex-viewport, .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__wrapper { height: auto !important; max-height: min(250px, 30vh) !important; } .wp-block-woocommerce-product-image-gallery img.wp-post-image, .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img { max-height: min(250px, 30vh) !important; width: auto !important; height: auto !important; object-fit: contain !important; margin-left: auto !important; margin-right: auto !important; } /* Thumbnails: eine Zeile, horizontal scrollbar. * * Vorher brachen sie bei vielen Produktbildern in eine zweite Zeile um, * und der Platz dafuer war auch dann reserviert, wenn nur vier Bilder * da waren - gemessen 28 px Leerraum unter der Leiste plus 30 px * Abstand zum Titel. Mit nowrap und overflow-x bleibt es immer eine * Zeile; mit zehn Thumbs geprueft: eine Zeile, scrollbar (494 px * Inhalt in 275 px Fenster). Der gewonnene Platz geht ins Hauptbild. * * 44 px ist ein gut treffbares Touch-Ziel, auch mit Handschuhen. */ .flex-control-thumbs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; gap: 6px !important; margin-top: 6px !important; margin-bottom: 0 !important; padding-bottom: 2px !important; -webkit-overflow-scrolling: touch; } .flex-control-thumbs li { flex: 0 0 auto !important; width: 44px !important; margin: 0 !important; } .flex-control-thumbs img { width: 44px !important; height: 44px !important; } /* Der Galerie-Block reservierte 28 px unter der Thumbnail-Leiste - Platz fuer eine zweite Zeile, die es jetzt nicht mehr gibt. */ .woocommerce-product-gallery { margin-bottom: 8px !important; } /* --- 2. SKU- und Marken-Block ------------------------------------- * Stand als vier einzelne Zeilen untereinander ("SKU:", "4040", * "Marken:", "Nordride") und kostete damit 63 px direkt oberhalb des * Preises. Als eine umbrechende Zeile sind es noch 20 px. Der Inhalt * bleibt vollstaendig sichtbar - nur die Anordnung aendert sich. */ .wp-block-woocommerce-product-meta { display: flex !important; flex-wrap: wrap !important; gap: 0.15rem 0.9rem !important; margin-top: 4px !important; margin-bottom: 4px !important; font-size: 0.8rem !important; } .wp-block-woocommerce-product-meta > * { margin: 0 !important; } /* --- 3. Abstaende straffen ---------------------------------------- * Die Block-Standardabstaende sind fuer Fliesstext gedacht, nicht fuer * eine Kaufentscheidung auf einem 6-Zoll-Bildschirm. Titel etwas * kleiner, Abstaende enger - zusammen rund 40 px. */ .wp-block-post-title { margin-top: 4px !important; margin-bottom: 2px !important; font-size: 1.2rem !important; line-height: 1.25 !important; } [class*="wp-block-woocommerce-product-price"] { margin-top: 4px !important; } .wp-block-add-to-cart-form { margin-top: 6px !important; } } /* --- 4. WhatsApp-Knopf aus dem Kaufbereich schieben -------------------- * Nebenwirkung der Optimierung, beim Nachmessen gefunden: Der bestehende * WhatsApp-Knopf (.tbt-wa-fab, fix unten rechts bei bottom:16px) lag mit * 34 px UEBER dem Kauf-Button, seit dieser weiter oben steht. Ein Tap auf * die rechte Ecke von "In den Warenkorb" haette WhatsApp geoeffnet statt * den Artikel in den Warenkorb zu legen - auf einem Verkaufsknopf die * schlechteste denkbare Verwechslung. * * Nach der Verschiebung per elementFromPoint geprueft: Der Klickpunkt am * rechten Rand des Kauf-Buttons trifft wieder den Kauf-Button. * * Bewusst nur die Position und nur auf Produktseiten - Groesse, Farbe und * Funktion des fremden Elements bleiben unangetastet. Wenn die Position * stoert, kann dieser Block ersatzlos entfernt werden; dann kehrt die * Ueberlappung allerdings zurueck. */ @media (max-width: 782px) { body.single-product .tbt-wa-fab { bottom: 104px !important; } }