So ändern Sie das Layout des Produktpakets auf dem Handy von horizontal auf vertikal

Dieser Artikel zeigt Ihnen, wie Sie die Produktpaket-Rabattelement Umwandlung eines horizontalen Layouts in ein vertikales Layout auf Mobilgeräten mithilfe von benutzerdefiniertem CSS.

 Schritt 1: Öffnen Sie den benutzerdefinierten Code-Editor.

• Im GemPages-Editor den Mauszeiger über die Produktpaket-Rabatt Element.
• Klicken Sie mit der rechten Maustaste auf das Element.
• Auswählen Benutzerdefinierter Code.

Schritt 2: CSS-Code hinzufügen

Kopieren Sie den folgenden CSS-Code und fügen Sie ihn in den Editor für benutzerdefinierten Code ein:

@media (max-width: 767px) { .ElementClass gp-product-bundle-discount { display: flex; flex-direction: column; } }

Schritt 3: Ersetzen Sie die Elementklasse

Ersetzen .ElementClass mit der tatsächlichen CSS-Klasse Ihres Produktpaket-Rabatt Element.

Schritt 4: Speichern und veröffentlichen

• Klicken Sie auf Gespeichert.
• Veröffentlichen deine Seite.
• Öffnen Sie die Live-Seite oder die Vorschau, um zu überprüfen, ob das Produktpaket jetzt auf Mobilgeräten in einem vertikalen Layout angezeigt wird.