Hallo, wie und wo kann ich die Größenanpassung für mobile vornehmen ? (ich arbeite mit honeygrid) Alles funktioniert soweit außer, mein Startseitenfoto (Header) und der darunter liegende Text (Tabellenform) Eingebettet ist das Ganze in : Contentmanager - Content - "Index oben" - ck Editor ich wutschtle mich als absoluter Programmier-Laie durch den shop, bitte um Nachsicht und einfache Erklärungen DANKE schon mal, Christel
Hallo Christel, mit einem Link ...StyleEdit3.... können wir nichts anfangen, da man das nur als Admin aufrufen kann.
Hallo Barbara, na klar, der styleEdit war noch nicht beendet gemeldet. https://www.jsd-händetrockner.de/
Bei dem Bild hast Du eine feste Größe angegeben. Die wird immer genommen. Öfnne den Qellcode im Content-Manager und ändere das height in max-height und das width in max-width, Dann noch ein class="img-responsive" einfügen und das Bild wird angepasst. das müsste dann so ähnlich aussehen: HTML: <img alt="" class="img-responsive" src="images/Startseite-Wassertropfen-1140x400..jpg" style="max-height: 400px; max-width: 1140px;"> Die Tabelle würde ich rausnehmen, bzw. ersetzen. Das müsste etwa so gehen: HTML: <div class="row"> <div class="col-xs-12 col-md-8 col-lg-7"><img src="images/Uhr_grau.jpg" style="float: left;" /> <p style="margin-right: 10px;"><span style="font-weight: bolder;">Deine Überschrift</span><br /> Dein Text</p> </div> Wobei hier die Überschrift über dem Text steht. Das geht aber sicher auch über dem Bild...
ich würde das große Bild mobil gar nicht anzeigen lassen, weil es stark verkleinert nichts mehr aussagt. Also bei dem Bild ein class="hidden-xs" einbauen
Hallo Barbara, ich habs versucht,wie du es beschrieben hast, leider hat sich an der Bildgrößen-Anpassung nix geändert!! - die Tabelle habe ich gemacht, weil ich den Text neben die Icons nicht hinbekomme, geht ja nur über oder unter die Grafik. Auch der Hintergrund meines shops taucht im mobileauf, wo er nicht soll, kann ich den für mobile-version ausschalten? noch ne Frage. wie mache ich das, dass meine Kategorien nicht angeklickt werden müssen, sondern ein Fenster (tab?) darunter aufklappt, in denen die betreffenden(in der Kategorie hinterlegten) Artikelnamen angeklickt werden können ?? Wäre eventuell besser!!?? Danke, Christel
Hallo Achim, ich kenn mich da so wenig aus.... wo soll ich das class="hidden-xs" einbauen? Im Quellcode des Fotos hab ich schon kapiert, aber an welche Stelle und muss da irgenwo ein Leerzeichen rein? Oder ist das egal. Danke, Christel
Hallo Gerd, danke, das hat funktioniert!!! wie bekomme ich das mit dem Text und den Grafiken noch hin?? und dem Hintergrund?
an Barbara Die Tabelle würde ich rausnehmen, bzw. ersetzen. Das müsste etwa so gehen: HTML: <div class="row"> <div class="col-xs-12 col-md-8 col-lg-7"><img src="images/Uhr_grau.jpg" style="float: left;" /> <p style="margin-right: 10px;"><span style="font-weight: bolder;">Deine Überschrift</span><br /> Dein Text</p> </div> Wobei hier die Überschrift über dem Text steht. Das geht aber sicher auch über dem Bild...[/QUOTE] Liebe Barbara, da wirds für mich schon sehr schwierig: wo genau soll ich deinen Vorschlag einbauen? und muss ich dann "Überschrift" und "Text" so lassen wie er momentan im Quellcode steht ?
so wie es Barbara vorgeschlagen hat Tabelle rausnehmen/ersetzen, probiere das mal aus, habs nicht getestet: (sichere deinen Text vorher) HTML: <div class="row"> <div class="col-xs-12 col-md-8 col-lg-7"> <span style="font-weight: bolder; margin-right: 10px;">Deine Überschrift-1</span><br /> <img src="images/Bild-1.jpg" style="float: left;" /> <p style="margin-right: 10px;">Dein Text-1</p><br /> <span style="font-weight: bolder; margin-right: 10px;">Deine Überschrift-2</span><br /> <img src="images/Bild-2.jpg" style="float: left;" /> <p style="margin-right: 10px;">Dein Text-2</p><br /> <span style="font-weight: bolder; margin-right: 10px;">Deine Überschrift-3</span><br /> <img src="images/Bild-3.jpg" style="float: left;" /> <p style="margin-right: 10px;">Dein Text-3</p><br /> </div> und deine styles einbinden
gerade bei dir geschaut, hast ja schon erste Erfolge, versuche es mal so: HTML: <div class="row" style="font-size: 16px;" > <div class="col-xs-12" style="margin-bottom: 10px;"> <span style="font-weight: bolder; margin-left: 10px;">Schnell</span><br /> <img src="images/Uhr_grau.jpg" style="margin-left: 10px; margin-right: 10px; max-width: 80px; float: left;" /> <p style="margin-left: 100px;"> ► Trocknet Hände berührungslos in wenigen Sekunden <br /> ► Geräuschemission 68dB</p> </div><br /> <div class="col-xs-12" style="margin-bottom: 10px;"> <span style="font-weight: bolder; margin-left: 10px;">Hygiene</span><br /> <img src="images/Hygiene_grau.jpg" style="margin-left: 10px;margin-right: 10px; max-width: 80px; float: left;" /> <p style="margin-left: 100px; "> ► Antibakterielle Beschichtung <br /> ► Saubere Luft durch Standard- oder HEPA-Filter<br /> ► Wasserauffangschale - keine unhygienischen Pfützen auf dem Boden</p> </div><br /> <div class="col-xs-12" style="margin-bottom: 10px;"> <span style="font-weight: bolder; margin-left: 10px;">Kosten</span><br /> <img src="images/Schwein_grau.jpg" style="margin-left: 10px;margin-right: 10px; max-width: 80px; float: left;" /> <p style="margin-left: 100px;"> ► Kostenersparnis 90% im Vergleich zu Papiertüchern <br /> ► Kostenersparnis 400% im Vergleich zu Handtuchrollen</p> </div><br /> und so weiter </div>
Also für das Bild unter unsere Empfehlung gibst du nur folgendes ein (ohne feste Werte ist das Bild automatisch 100% Breit und in der Höhe wie es erstellt wurde und passt sich der Viewportgröße an) Code: <img alt="" class="img-responsive hidden-xs" src="images/Startseite-Wassertropfen-1140x400..jpg"> : für dein Background image gibst du im Style editor dieses unter eigenes CSS einfügen ein : Code: body { background-color: #7bb2f7; background-image: url('https://www.xn--jsd-hndetrockner-znb.de/StyleEdit3/templates/Honeygrid/images/rain-455120_1920-1.jpg'); background-position: 40% 60%; background-repeat: no-repeat; background-size: auto; background-attachment: fixed; } /* Hintergrund Bild auf mittleren und kleinen Bildschirmen ausblenden*/ @media screen and (max-width: 1100px){ body { background-color: #7bb2f7; background-image: none ; } } EDIT: Hab das Sternchen das vergessen wurde jetzt hier eingefügt
Vielen Dank, wenn ich das CSS öffne, steht da ja schon was drin, muss ich das entfernen?? Oder das neue unterhalb einfügen ?? Sorry - LAIE
Hilfe ! Parse Error ! was mach ich falsch ?? hab das "alte" aus dem CSS gelöscht und deinen Vorschlag reinkopiert -
Sorry hab hier das erste Sternchen vergessen hinter dem ersten Slash: /* Hintergrund Bild auf mittleren und kleinen Bildschirmen ausblenden*/ Hab den Code oben editiert!! Kopier aber mal kurz alles was schon drin steht und füg es hier ein mit dem kleinen + button weil ich sonst nicht sehen kann ob schon Media Queries eingegeben wurden also solche wie diese hier: @media screen and (max-width: 1100px){
So sollte es gehen kleiner Denkfehler war noch drin Code: body { background-color: #7bb2f7; background-image: url('https://www.xn--jsd-hndetrockner-znb.de/StyleEdit3/templates/Honeygrid/images/rain-455120_1920-1.jpg'); background-position: 40% 60%; background-repeat: no-repeat; background-size: auto; background-attachment: fixed; } /* Hintergrund Bild auf mittleren und kleinen Bildschirmen ausblenden*/ @media screen and (max-width: 1100px){ body { background-color: #7bb2f7; background-image: none !important; } }
Du hast aber auch im Content Manager in der Content Index ein row mit festen Werten eingefügt was deine Breitenprobleme verursacht: such mal diesen Code in dem Content Index unter Content Manager (ich glaube das liegt in der Content Datei Index-Mitte) bin mir aber nicht 100 prozentig sicher Code: <div class="row" style="min-height:268px;width:820px;"> <div class="extra" style="margin:38px 0px 0px 0px;min-width:100%;"> <div class="component " style="width:820px;"> <div class="self mobile-leaf text textnormal mobile-undersized-upper" style="width:820px;min-height:230px;"> </div> </div> </div> </div> Tipp: wenn du mit festen Werten arbeitest kannst du kein responsives Design erwarten... Arbeite liebe mit Prozentwerten oder mit max-width Werten..... mit diseser CSS Klasse gibst du einen festen Wert an min-height:268px;width:820px; der auf Smartphones niemals funktioniert