Stockholm: Mobile Ansicht optimieren

Antworten
#1
14.01.2018 18:43 (zuletzt bearbeitet: 25.01.2018 12:11)
avatar  hazelnat
#1
ha
hazelnat

Hallo zusammen,

das Theme Stockholm sieht ganz wunderbar aus. Nur die mobile Optik hat ein paar Defizite, die ich gerne anpassen möchte:

- die Schriftgröße der H1-Tags nur in der mobilen Ansicht anpassen. Folgendes hat leider keine Wirkung:

1
2
3
4
5
6
7
 

@media (max-width: 768px) {
   .h1 {
    text-size:13pt;
    }
}
 
 



- den Header-Bereich in seiner Höhe anpassen (ebenfalls nur in der mobilen Version)
- Elemente in der mobilen Version ausblenden

Vielleicht hat jemand ein paar Tips oder Ideen.

Vielen lieben Dank
Christian


 Antworten

 Beitrag melden
#2
25.01.2018 12:12
avatar  az_
#2
avatar
az_

...richtig ist "font-size:13px". Damit sollte es klappen!

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#3
21.03.2018 22:32
avatar  hazelnat
#3
ha
hazelnat

Ganz lieben Dank!
Habe alle Punkte lösen können und nun noch eine Frage, die in diesen Thread gut passt.

Ich habe eine Tabelle mit vier Spalten erzeugt. In der mobilen Ansicht wird die erste Spalte komplett angezeigt, dann die zweite, dann die dritte und dann die vierte. Ich möchte aber in der mobilen Ansicht zwei statt nur eine Spalte angezeigt haben. D.h. zwei Spalten nebeneinander.
Über Tipps freue ich mich sehr.

Vielen Dank und Grüße aus Berlin
Christian


 Antworten

 Beitrag melden
#4
22.03.2018 13:43
avatar  Charles
#4
avatar
Charles

Ist ja auch sinnvoll, dass nur eine angezeigt wird. So ist es für den Benutzer auf dem Smartphone einfacher zu lesen.
Es gibt keinen Grund 2 Spalten haben zu wollen.

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
#5
22.03.2018 17:18 (zuletzt bearbeitet: 22.03.2018 17:23)
avatar  hazelnat
#5
ha
hazelnat

Woher weißt du, ob es keinen Grund dafür gibt?

Es ist immer fallbezogen zu bewerten und für meinen Shop ist diese Änderung sehr sinnvoll. Produkte werden in Tabellen strukturiert und es sieht optisch wesentlich besser aus, wenn mobil zwei Produkte nebeneinander dargestellt werden.


 Antworten

 Beitrag melden
#6
22.03.2018 20:36
avatar  sgrafik
#6
avatar
sgrafik

Zitat
Ich habe eine Tabelle mit vier Spalten erzeugt.

Ich denke die Tabelle ist das Problem. Tabellen bleiben Tabellen, auch auf mobiler Ansicht. Vielleicht wäre es besser, die ganze Sache von vornherein mit Spalten zu lösen, dann kann das Gerät entscheiden wie viele Spalten es zeigen will ...

Und auch gut wäre, wenn wir wissen, wovon wir sprechen (URL?)

LG
SG


 Antworten

 Beitrag melden
#7
22.03.2018 21:33 (zuletzt bearbeitet: 22.03.2018 21:34)
avatar  hazelnat
#7
ha
hazelnat

Vielen lieben Dank für die Antwort.
Ich kann die Produkte gerne aus der Tabelle lösen - was gibt es für Alternativen?

www.skanemarie.de (auf eine Unterseite gehen)

Viele Grüße


 Antworten

 Beitrag melden
#8
22.03.2018 22:38
avatar  hazelnat
#8
ha
hazelnat

Kleiner Nachtrag: Es handelt sich bereits um reine Spalten.


 Antworten

 Beitrag melden
#9
23.03.2018 12:33
avatar  az_
#9
avatar
az_

Das Problem liegt bei float und width. Tabellen kannst Du vergessen, die können nicht umbrechen. Spalten tun das automatisch. Deshalb ist es immer besser, Spalten zu benutzen, wenn man ein responsives Ergebniss haben will.

Jetzt zum CSS: mit der Breite der Spalten kann man spielen. Die werden standardmäßig vom System in ...% angelegt. Mit max-width: ...px/% !important; kannst Du eine Spalte zwingen, eine andere Breite anzunehmen, als vom Systen vorgesehen. Und mit float: none !important; kannst Du einen Umbruch verhindern.

...ganz trivial ist das Ganze leider nicht, es gibt dabei vieles zu beachten.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#10
30.03.2018 20:57
avatar  Sigi
#10
Si
Sigi

Ich brauche da auch noch mal Hilfe. Ich wollte die h2-Tags in der mobilen Ansicht anpassen. Design habe ich ich "Rome".

Im Header füge ich folgendes ein:

1
2
3
4
5
6
7
8
9
 
<style type="text/css">
/*<![CDATA[*/
/* h2 ueberschrift in der mobilen ansicht */ 
@media (max-width: 767px) {
   .h2 {
    font-size:20px;
    }
/*]]>*/
</style>
 



Keine Reaktion. Habe hinter

1
 
font-size:20px;
 



auch noch eine zweite Klammer eingefügt, also:

1
2
3
4
5
6
7
8
9
 
<style type="text/css">
/*<![CDATA[*/
/* h2 ueberschrift in der mobilen ansicht */ 
@media (max-width: 767px) {
   .h2 {
    font-size:20px;
    }}
/*]]>*/
</style>
 



Aber eigentlich müsste die zweite Klammer eh falsch sein. Aber wieso kriege ich in beiden Fällen den h2-Tag in der mobilen Ansicht nicht in 20px angezeigt?

Hier der Link zu meiner Webseite:

Meine Testseite

Bereits jetzt Danke für die Hilfe.

LG, Sigi


 Antworten

 Beitrag melden
#11
31.03.2018 16:01
avatar  make
#11
ma
make

Einfach mal hinter die 20px ein !important setzen sollte wahrscheinlich schon das Problem lösen...

Also:

1
 
font-size:20px !important;
 



Gruß
make

www.vertraute-erde.de

 Antworten

 Beitrag melden
#12
31.03.2018 16:21
avatar  Sigi
#12
Si
Sigi

Funktioniert leider immer noch nicht.


 Antworten

 Beitrag melden
#13
31.03.2018 20:03 (zuletzt bearbeitet: 31.03.2018 20:06)
avatar  az_
#13
avatar
az_

...benutzt Du die Chrome DevTools? Die sind sehr ratsam, wenn es darum geht, die richtigen Bezeichner zu finden:



Der empfohlene Code für die mobile Ansicht ist demnach:

1
2
3
4
5
6
7
8
9
10
11
12
 

@media(max-width:767px) {
.content-options-inner h2:not(.j-blog-headline):not(.j-blog-comment-counter) {
    font-family: "Roboto Slab",serif,"google";
    font-size: 20px !important;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    text-transform: none;
    color: #52bece;
}
}
 




...versuch den mal, sollte funzen.
LG, az|addpics|kbj-3-800e.png-invaddpicsinvv|/addpics|


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#14
06.04.2018 13:22
avatar  Sigi
#14
Si
Sigi

Wußte gar nicht, dass es so etwas gibt. Schaue ich mir am Wochenende mal an.

Leider funktioniert es immer noch nicht. Noch nee Idee?


 Antworten

 Beitrag melden
#15
06.04.2018 14:54
avatar  make
#15
ma
make

Also ich habe den Code von _az (#13) über die FireFox Enwicklerwerkzeuge mal in den Head Deiner Seite eingefügt. Da erzeugt er genau den Effekt den du erwartest.

Auch in der mobilen Ansicht werden danach die 20px Schriftgröße verwendet!!!

Hast Du alles korrekt eingefügt?

www.vertraute-erde.de

 Antworten

 Beitrag melden
#16
06.04.2018 21:46
avatar  Sigi
#16
Si
Sigi

Also, ich fasse es nicht. Jetzt geht es.

Was habe ich gemacht?

1. Ich habe mir mal den ganzen css Kram aus dem Header kopiert und gesichert. Da hatte ich den Code von _az(13) aber raus gelassen.
2. Dann habe ich den Code von _az(13) in den Header eingefügt.

Ergebnis: Funktioniert!

Aha, dachte ich. Dann wird es an irgend einem Konflikt im gesicherten Header geben. Da kam der h2-Tag zweimal vor.

Denkste.

Ich habe den kompletten gesicherten Header-Code noch einmal zurück kopiert und mit dem Code von _az(#13) ergänzt und gespeichert.

Und seitdem funktioniert es. Keine Ahnung warum. Vielleicht doch was falsch eingefügt? Mhhhh. Ich kann es nicht erklären.

Damit ist meine Frage perfekt gelöst. Juhu!

Vielen Dank für eure Hilfe.


 Antworten

 Beitrag melden
#17
01.08.2019 13:21
avatar  Takuna
#17
Ta
Takuna

Hallo hazelnat,

ich habe das gleiche Problem mit dem Header auf der mobilen Ansicht. Wie hast du es geschafft dass das Bild größer angezeigt wird (also eine größere Höhe hat)?

Vielen Dank für die Hilfe im Voraus.

Liebe Grüße


 Antworten

 Beitrag melden
#18
05.08.2019 16:38
avatar  az_
#18
avatar
az_

Schaut Euch doch mal bitte folgenden Link an, da steht, wie ihr den richtigen Selektor findet:

https://www.redesign-berlin.de/jimdo-tut...css-grundlagen/

Für die mobile Ansicht müsst ihr in den dev-Tools die mobile Vorschau aktivieren, dann bekommt ihr auch die erforderlichen media-Queries.

LG, az|addpics|kbj-3-800e.png|/addpics|


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!