Ich finde den Löschen-Button nicht ... kann ein Mod den Beitrag bitte löschen? Verzeihung wegen den Unannehmlichkeiten.
Gerade doch noch einen Thread gefunden, in dem erklärt wird, dass mein Theme das nicht unterstützt. Ich suche gerade den Button, um den Beitrag zu löschen. Entschuldigt die Dopplung.
Hallo zusammen,
ich bin seit Tagen am verzweifeln. Ich erstelle gerade zum ersten Mal mit Shopify einen Shop und komme nicht weiter. Zusammen mit ChatGPT erstelle ich einen Code (ja, verdreht nur die Augen 😛 ) um das folgende zu erreichen, da es das Dawn-Theme nicht bietet.
Ich möchte einen Container, in dem sich 2 Column befinden. Eine linke und eine rechte Spalte.
Auf der linken Seite soll es so aussehen:
Überschrift
Text
Bild
Auf der rechten Seite soll es so aussehen
Icon - Text - Text
Icon - Text - Text
Icon - Text - Text
Icon - Text - Text
Das habe ich mittels HTML und CSS auch gut hinbekommen. Nun soll es aber auch optisch etwas mehr passen und so wollte ich gern die rechte Seite nicht oben bündig sondern mittig haben - etwas 50% horizontal. Mache ich das, sieht das im Mobile entsprechend doof aus, weil viel Platz entsteht. Kein Code, den mir ChatGPT erstellt hat, brachte den Erfolg. Nun habe ich mir gedacht, ich erstelle einfach 2 Container. Desktop Container, der eben für diese Ansicht optimiert ist und einen Mobile Container. Der jeweils andere wird dann immer ausgeblendet. Nach stundenlangem verzweifeln am 500-Zeichen Limit in der CSS Box, hatte ich es irgendwann hinbekommen. Doch Pustekuchen: "Sitzung im Onlineshop-Editor kann nicht veröffentlicht werden"
Gelb markiert wird mir immer
.mobile-view { display: none; }und
.desktop-view { display: block; }Ich weiß einfach nicht, was ich noch tun soll. Denn das komische ist, dass es in der Desktop Ansicht tatsächlich funktioniert. Der Inhalt des Mobile Containers wird ausgeblendet. In der Mobile Ansicht klappt das jedoch nicht. Als ich das Forum durchsuchte, habe ich vereinzelte Code Schnippsel probiert, aber leider ohne Erfolg 😞
Hier mal der gesamte Code der Desktop HTML und CSS Felder:
<div class="max-width-container">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Desktop Container -->
<div class="desktop-view">
<div class="two-column-layout">
<div class="left-column" style="font-size: 16px;">
<h2 style="font-size: 50px;"><strong>ERKUNDE</strong><br>SPANNENDE<br><strong>WELTEN</strong></h2>
<p style="font-size: 17px;">Bist Du ein Fan von Gaming, Anime oder Tieren? Oder zieht es Dich eher in die Welt der Fantasy – vielleicht sogar in eine Welt, in der Fantasy-Tiere zum Leben erwachen? Bei uns findest Du genau das, was Du suchst! Entdecke eine beeindruckende Auswahl an einzigartigen Designs, die perfekt auf Deine Interessen und Vorlieben abgestimmt sind. Tauche ein in eine Welt, die Deine Leidenschaften widerspiegelt und Dich immer wieder aufs Neue begeistert.</p><br>
<img src="https://cdn.shopify.com/s/files/1/0881/2770/1321/files/Schwertkaempfer_6_Plate.webp?v=1724851137" alt="Schwerkämpfer">
</div>
<div class="right-column">
<div class="product-features">
<ul>
<li style="margin-top: 250px;">
<i class="fa-solid fa-print"></i>
<div>
<strong>Brillante Farben</strong>
<span>Dank professioneller Drucktechnik</span>
</div>
</li>
<li style="margin-top: 20px;">
<i class="fa-solid fa-layer-group"></i>
<div>
<strong>Hält, was Sie verspricht</strong>
<span>Kein kleben, kein bohren</span>
</div>
</li>
<li style="margin-top: 20px;">
<i class="fa-solid fa-shield-alt"></i>
<div>
<strong style="font-size: 17px;">Langlebig:</strong>
<span>Robustes und widerstandsfähiges Material</span>
</div>
</li>
</ul>
</div>
</div>
.max-width-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.two-column-layout {
display: flex;
gap: 20px;
}
.left-column,
.right-column {
flex: 1;
padding: 10px;
}
.left-column img {
width: 50%;
height: auto;
}
@media (max-width: 768px) {
.two-column-layout {
flex-direction: column;
}
}
.product-features ul {
list-style: none;
padding: 30;
}
.product-features li {
font-size: 17px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.product-features li i {
margin-right: 10px;
color: #e4b155;
font-size: 25px;
}
Ich hoffe, ihr könnt mir hier helfen. Ich habe vorher in Avada Fusion gearbeitet und dort sind Container und Colums mit dem einfachen Einfügen von Elementen kein Problem. Habe ich etwas übersehen, wieso ich das im Theme nicht einfach standardmäßig so bauen kann und extra code dafür brauche?
Ich habe nicht mal mehr ein Banner/hero, weil der im Desktop zwar gut aussah, im mobile dann aber winzig klein war ... ich finde einfach keine richtigen Anpassungsmöglichkeiten.
Vielen Dank für Eure Mühe!
Grüße
Marc
