Bild ausrichten in mobiler ansicht

    Hallo!

    Es geht um folgende Webseite: http://www.dantendorfer-gentlemen.at



    http://www.dantendorfer-gentlemen.atAuf der Startseite habe ich unten folgendes sichtbar:

    In der mobilen Version wird es wie folgt dargestellt:

    Ich habe aktuell den Text mit "display: none" inaktiv gesetzt und man sieht jetzt nur noch das Bild. Hätte den Text aber auch gern in der mobilen Version sichtbar und auch neben dem Bild. Alternativ würde auch darunter gehen.

    Kann mir vielleicht jemand helfen?

    LG
    Vreni

    Das sollte so schwierig nicht sein:
    Füge deinem Stylesheet für das Element '.picture-block' einfach ein 'flex-wrap: wrap;' hinzu, damit bricht die Anzeige in diesem Container um, wenn nicht mehr genügend Platz vorhanden ist. In der Desktop Ansicht sind die beiden Inhaltselemente jeweils 50% breit - werden also nebeneinander dargestellt.
    In der @media screen and (max-width: 700px) setzt du dann für die Inhaltselemente '.picture-block-left .picture-block-image' und '.picture-block-left .picture-block-wrapper' die Breite jeweils auf 'width: 100%' , dann paasen die nicht mehr nebeneinander und werden untereinander angezeigt.
    Zusammengefasst...


    Das möglichst in das/die existierenden Stylesheets einarbeiten und das 'display: none;' für den Text natürlich rausnehmen!
    Viel Erfolg.

    if(!sleep)

    {$sheep++;}

    Darf ich viielleicht gleich noch eine Frage zu Darstellung von etwas anderem loswerden?

    unter http://www.dantendorter,at

    bei den Damen.

    Hier werden auf der ersten Seite unter New arrivals auf der normalen Ansicht vier Produkte nebeneinander angezeigt.

    auf der mobilen Seite immer nur eines

    Hätte in der mobilen Ansicht aber auch gerne mindestens 2 nebeneinander.

    LG
    Vreni

    Ähnliches Problem... allerdings in dem Fall nichts mit Flexbox.
    Du hast in deinem Stylesheet 'timber.scss.css' - Zeile 424 ff folgendes stehen:

    HTML
    .grid__item {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 float:left;
 min-height:1px;
 padding-left:15px;
 vertical-align:top;
 width:100%;
}


    Das macht dir die einzelnen Elemente in der kleinen Ansicht 100% breit - passt also jeweils nur eines in eine Reihe.
    Mach mal aus den 100% ein 50% - dann sollten zwei Elemente in eine Reihe passen.

    if(!sleep)

    {$sheep++;}

    Kann ich leider nicht finden.
    Es ist hier nur folgendes definiert:

    und alle anderen punkte mit .grid_item im timber sind etwas anderem zugeordnet.

    habe noch folgendes in theme.scss gefunden:

    Einmal editiert, zuletzt von vreni2309 (30. August 2018 um 11:19)

    Ich werde nochmal suchen. Ersteinmal Danke!

    - - - Aktualisiert - - -

    Ich habe es gefunden! Aber leider gilt genau das Layout auch für die Produktansicht. Ist allgemein geschrieben und leider nicht für die featured collections auf der Startseite extra.
    So müsste ich wahrscheinlich dann einiges umschreiben. Doch dazu bin ich mit meinen Kenntnissen noch nicht weit genug.

    Danke nochmal!

    Hmmm... sorry, darauf habe ich beim ausprobieren nicht geachtet.
    Aber wenn ich das richtig sehe, hat dein <body> Tag auf dieser Seite eine (hoffentlich) eindeutige ID="dantendorfer-online-store". Vielleicht kann man diese ID nutzen, um die Anweisung nur für diese Seite wirksam zu machen - zusätzlich wäre dann noch eine MediaQuery nötig, sonst würden die Breitenvorgaben bei größeren Bildschirmen überschrieben werden.

    HTML
    @media screen and (max-width: 591px) {
  #dantendorfer-online-store .grid__item {
  width: 50%;
}
}


    Dieser Code müsste direkt hinter dem Eintrag platziert werden, den du gerade gefunden hast... also so:


    Und wen das auch nicht klappt, einfach wieder löschen.

    if(!sleep)

    {$sheep++;}

    Guten Morgen!

    Ich habe mein Glück versucht, doch leider funktioniert es nicht.
    Hier nochmal das, was bei mir im timber steht....

    Das meiste ist an Standards vorher hinterlegt. Doch kann ich das irgendwie vielleicht doch ändern? Er findet wohl keinen Bezug zu der id=dantendorfer-online-store.

    Es bleibt alles so wie es ist.

    Hier noch das snippet von den Bereich...


    Lg
    Vreni

    Einmal editiert, zuletzt von vreni2309 (31. August 2018 um 07:25)

    Kann es vielleicht sein, dass bei mir die id=dantendorfer-online-store anders genannt wird?
    In der Form wie Du es gemacht hast geht es bei mir auch, nur wenn ich es bei mir im Programm umschreiben nicht.

    Ich bin doch jetzt etwas verwirrt!
    An der Stelle in deinem CSS finde ich jetzt...

    HTML
    @media screen and (min-width: 591px) {
 .grid__item #dantendorfer-online-store .grid__item {
  width:50% !important
 }
}


    das kann nicht funktionieren!
    Das Element '.grid__item #dantendorfer-online-store .grid__item' existiert nicht!
    Mit diesem Selektor triffst du eine Element mit der Klasse '.grid__item' in einem Element mit der ID '#dantendorfer-online-store' das sich in einem Element mit der Klasse '.grid__item' befindet.
    Du solltest dir die Syntax und die richtige Zusammenstellung der Selektoren nochmal etwas näher anschauen!
    https://wiki.selfhtml.org/wiki/CSS/Selektoren
    Vergleiche den Code doch bitte mal mit dem, den ich gepostet habe

    if(!sleep)

    {$sheep++;}

    Da müsstest du mal 'shopify' nachfragen, was die mit ihren Dateien alles so anstellen, bevor die an den Browser angeliefert werden.
    In deinen Screeshots weiter oben sind auch nicht CSS konforme Dinge drin, die darauf schließen lassen, dass die einen CSS Präprozessor nutzen (SASS)
    https://wiki.selfhtml.org/wiki/CSS/SASS
    Und dieses Programm verarbeitet spezielle Anweisungen im CSS Code bevor er ausgeliefert wird. Das könnte eine Ursache sein, warum das bei dir so 'schwierig' ist

    if(!sleep)

    {$sheep++;}