Responsive Links und Darstellung machen

  • hallo,


    ich habe mal wiede eine Frage, im Moment habe ich für meine Webseite noch 2 verschiedene Ansicht für meine Bilder in den Artikeln,

    nun will ich endlich die responsive sache lernen.

    In der Desktop ansicht ist das Bild, darüber eine fancybox, ein onscrolleffekt, etc..... es sicht so aus:

    Code
    1. <section class="flex-item">
    2. <div class="hideme"> <div class="bird"> <a rel="example_group" href="fotoparade/gardasee-3.jpg"> <img alt="" title="" src="fotoparade/thumbs/gardasee-3.jpg" />
    3. <span class="transition overlay"> <h2>Gardaseeimpressionen</h2> </span> </a></div></div>
    4. </section>

    in der mobile ansicht ist es schlicht, keine onscroll, kein overlay, und auch der link ist anders, so:

    Code
    1. <section class="flex-item">
    2. <a href="swiper/swiper_fotoparade.php#slide_23"> <img alt="" title="" src="fotoparade/thumbs/gardasee-3.jpg" /></a>
    3. </section>

    wie kann ich das jetzt in einer css datei vereinen?

    die größe und ob die flexbox row oder column ansicht hat, ist kein problem, das mach ich mit den mediaquery ab zb.800px,

    aber die verschiedenen links und zb. das

    Code
    1. <div class="hideme">

    weglassen.


    vielen dank für eure ideen dazu.


    ps. https://keeplifesimple.de/artikel/zufallspitze.php

    unsere seite wie es jetzt mit desktop und mobile aussieht, sorry besser kann ich es nicht.

    gruss

    Tino

  • Öhm, ich glaube ich verstehe das Problem leider nicht ganz. Aber so oder so, ohne das dahinterstehende css wirds schwer zu antworten.


    Ich weiß daher nicht, was hinter "hideme" steckt, sonst könnte ich zumindest versuchen drüber nachzudenken.


    Die Seite an sich ist doch nett gemacht und responsive ist sie auch. Ich verstehe wie gesagt leider das Problem nicht.


    Wenn es um ein responisve css geht, denn aktuell hast du ja auf den einzelnen Seiten das hier:


    Dann musst Du umdenken.


    Man schreibt eine Seite von klein nach Groß.


    Heißt, du schreibst Dein css zunächst so, dass für die mobile-Ansicht alles exakt so passt wie Du das gerne hättest.


    Dann werden die Änderungen für größere Ansichten geschrieben. Die Regel ist: Der Browser liest von oben nach unten und die letzte Regel über den gleichen Wert gilt.

    Du kannst z.B. so im css oben zunächst die von der Seite genutzte Bildschirmbreite auf 98% setzen und dann weiter unten, wenn die Bildschirme größer werden den Wert verkleinern.


    Du kannst hinsichtlch der Breite so ziemlich alles definieren was es gibt, aber das macht nur Stress, denn ständig kommt irgend ein neues Gerät raus, das dann wieder beachtet werden will. Daher ist meine Empfehlung Dir ein paar Grenzen zu suchen und auf die abzustellen.


    Im "mobile-Bereich" des css machts Du einfach Definitionen wie Du sie schon kennst. Im Bereich der nur für eine bestimmte Größe gelten soll setzt Du einen Media-query und setzt die dann geltenden Definitionen auch in geschweifte Klammern.


    Beispiel:



    Heißt in dem Beispiel:


    in der Mobile-Ansicht: zeige die Tabelle nicht an

    ist der Screen mindestens 650px breit und wenn ein Mobilgerät quer gehalten wird: zeige die Tabelle an, Schriftgröße 1em, platz zwischen den Buchstaben .1em

    ist der Screen mindestens 825px breit und wenn ein Mobilgerät quer gehalten wird: erhöhe den Platz zwischen den Buchstaben auf .2em

    ist der Screen mindestens 1250px breit und wenn ein Mobilgerät quer gehalten wird: erhöhe die Schriftgröße auf 1.1em


    Ergebnis:

    in Mobile sieht man nichts,

    in 650 wird die Tabelle angezeigt, Schriftgröße 1em Letterspacing .1em

    in 825 wird die Tabelle angezeigt, Schriftgöße 1em, Letterscpaing .2 em

    in 1250 wird die Tabelle angezeigt, Schriftgröße 1.1em, Letterspacing .2 em


    Eine Vorgabe die gemacht wird bleibt so lange bestehen, bis sie durch eine andere Vorgabe ersetzt wird.


    Da Du bislang von Groß nach Klein gearbeitet hast musst Du ein wenig umdenken. Ein einfach "zusammenkopieren" deiner bestehenden css kann funktionieren, muss es aber nicht. Schließlich hast Du in den einzelnen css werte für alles gesetzt. Kopierst Du es nun zusammen werden einige überschrieben und damit korrekt sein, andere vermutlich jedoch nicht.


    So, ewig getippt. Ich hoffe, das war auch die Frage um die es ging.

  • hallo,

    danke dir vielmals,

    ich grunde genommen habe ich eben jede meiner seiten 2x, eine nett gemacht für mobile und eine für desktop...

    Code
    1. screen and (max-width: 3000px)

    und damit habe ich halt versucht, das richtige css in abhängigkeit der größe zu laden.


    ich mache es jetzt in einer css dabei mit mediaquery und lass dann wie du auch sagst mit : visibility: hidden;

    die jeweiligen container einfach nicht anzeigen.


    irgendwie wirds schon klappen,

    danke an alle die die frage gelesen haben

    Tino

  • das „verschwindenlassen“ von containern ist eigentlich nicht der weg um inhalte auf mobile anders anzuzeigen als für desktop.


    normaler weise ändert man bestehende ansicht einfach.


    das mit der Tabelle ist ein Sonderfall, weil sich da die Darstellung komplett ändert. Einmal Tabelle wie gewohnt nebeneinander, einmal Tabelle untereinander.


    Zum Beispiel:


    meine Navi ist auf Mobile ein Block und auf Desktop eine Leiste. Das ist aber die gleiche Navi, lediglich die Anzeige ändert sich und der Hamburger kommt weg. Alles rein css


    Die Das mit der Tabelle ist bissi außergewöhnlich, denn die baut sich komplett um.

  • hallo,

    eine frage noch, in fast allen ansichten habe ich jetzt nur noch einwas, dass ich im aussehen, farben, alles in den mediaquerys ändere,

    aber was ist mit einem container, den in zb. in der mobile ansicht überhaupt nicht haben will?


    Da komme ich doch ohne das "visible: hidden" nicht herum.


    gruss

    Tino

  • Zitat

    Da komme ich doch ohne das "visible: hidden" nicht herum.

    Richtig.


    Dabei ergibt sich aber die Frage, warum du in der von dir so genannten "mobilen Ansicht" (die es in Wirklichkeit überhaupt nicht gibt) deinen Besuchern Informationen vorenthalten willst? Oder auch andersrum: Warum willst du Besuchern in der Desktop-Ansicht deren Zeit mit wahrscheinlich unnötigen Informationen stehlen? Die Informationen scheinen ja nicht wichtig zu sein.

  • in einem beispiel ist es so, desktop lasse ich 2 buttons ganz oben nach der überschrift anzeigen, mobile stehen diese ganz unten als letztes, nach texten, bildern, etc...

    nun stehen sie in meiner nun einzigen php-datei 2x drin, eben oben und unten, beide als segment mit einer id versehen und eben mittels mediaquery, in abhängigkeit der größe die eine auf "hidden" gesetzt, es wird also nichts vorenthalten,

    wobei auch das gut sein kann, da manche texte am ewigen händy scrollen echt lang sein können.


    gruß Tino

  • Zitat

    nun stehen sie in meiner nun einzigen php-datei 2x drin, eben oben und unten, beide als segment mit einer id versehen und eben mittels mediaquery, in abhängigkeit der größe die eine auf "hidden" gesetzt

    Mit Flex und der Eigenschaft order kannst Du die Reihenfolge der Elemente ändern unabhängig davon wie sie notiert sind und den Button z. B. ganz an das Ende stellen.