Mobile Ansicht Fehlerhaft

Thema wurde von Anonymous, 2. März 2021 erstellt.

  1. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    15. Oktober 2020
    Beiträge:
    28
    Danke erhalten:
    0
    Danke vergeben:
    15
    Hallo,
    ich habe auf unserer Startseite einen Text und links daneben ein Bild. Auf dem Desktop wird das auch so angezeigt wie es soll, aber bei der mobilen Ansicht wird es fehlerhaft dargestellt. ((Link nur für registrierte Nutzer sichtbar.))

    Die HTML-Codes dafür habe ich mir zusammen gegooglet. Vermutlich liegt da auch das Problem. Ich habe mir auch dieses Tutorial angeschaut: (Link nur für registrierte Nutzer sichtbar.), allerdings habe ich es mit den Tipps auch nicht so richtig hinbekommen.

    Momentan sieht das alles so aus:

    <h1 style="text-align: center;"><span style="font-size:26px;">Herzlich willkommen bei GooWaCo - The Good Water Company</span></h1>

    <h1 style="text-align: center;"><span style="font-size:22px;">Ihr Online-Shop f&uuml;r Produkte rund um Wasserbehandlung, Wasserkonservierung und Wasseranalyse.</span></h1>
    &nbsp;

    <div style="float: left; width:450px; height: 268px; padding-left: 20px;">
    <a href="(Link nur für registrierte Nutzer sichtbar.)" target="_blank"><img alt="Fresh Air für Luftbefeuchter" class="img-responsive" src="images/Fresh Air04.jpg" style="width: 400px; height: 268px;" title="" /></a>
    </div>

    <div style="margin-left: 120px; height: 50px; padding-left: 50px;">
    <p style="text-align: justify;">
    Wasser ist essenziel f&uuml;r das Leben auf diesem Planeten. Sauberes Wasser f&uuml;r den menschlichen Gebrauch<br />
    erh&auml;lt die Gesundheit und verhindert Erkrankungen. In vielen Regionen dieser Welt h&auml;ngt das menschliche Leben vom Zugang zu sauberem Wasser ab. Aber auch in den reicheren Regionen werden Krankheitserreger (wie z. B. Legionellen, E Coli und Pseudomonaden) durch das Wasser &uuml;bertragen und l&ouml;sen Krankheiten aus.<br />
    <br />
    Trinkwasser wird aufwendig aufbereitet, um dann jedoch w&auml;hrend Transport und Aufbewahrung wieder zu verkeimen. Wir alle kennen verschmutzte Wasserfilter, Ablagerungen in Wassertanks, in Vorratsbeh&auml;ltern von Kaffeemaschinen oder Luftbefeuchtern. Neben Kalk sind das Mikroorganismen wie Bakterien und Pilze, die die Oberfl&auml;chen besiedeln und so in Ihr Wasser gelangen, welches Sie trinken oder als Aerosol einatmen.<br />
    <br />
    Oder denken Sie an stehendes Wasser in Regenwassertanks&nbsp; oder Swimming Pools. Rund um das Thema<br />
    &quot;Erhalt der Wasserqualit&auml;t&quot; f&uuml;r den menschlichen Gebrauch bieten wir Produkte an, die auf der antbakteriellen<br />
    Wirkung von Silber fu&szlig;en.
    </p>
    </div>

    Vielen Dank schon mal für eure Tipps.

    Viele Grüße
     
  2. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.229
    Danke erhalten:
    480
    Danke vergeben:
    71
    Du hast in den einzelnen Elementen feste Größen für die Breite und Höhe, das ist dann nicht mehr Responsive.

    Beispiel: Das Bild hat bei Dir die Klasse "img-responsive", was auch richtig ist. Leider gibst Du aber auch gleichzeitig einen Style mit "width: 400px; height: 268px;" an, was die Klasse wieder ausser Kraft setzt und das Bild in einer festen Größe ausgibt.

    Bei den "div" Containern für die Texte sieht es nicht viel anders aus.
     
  3. FRAGO

    FRAGO Erfahrener Benutzer

    Registriert seit:
    5. Dezember 2019
    Beiträge:
    760
    Danke erhalten:
    235
    Danke vergeben:
    94
    das o.g. Tutorials ist aber der einzig sinnvolle Weg.

    hier mal ein Beispiel...

    Code:
    <div class="row">
    <div class="col-xs-12 ol-sm-4">[...]</div>
    <div class="col-xs-12 ol-sm-8">[...]</div>
    </div>
    das sollte so passen
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.425
    Danke erhalten:
    10.361
    Danke vergeben:
    1.493
    Tipp, weil ich es gerade sehe:
    niemals zwei H1-Überschriften auf einer Seite verwenden.
     
  5. FRAGO

    FRAGO Erfahrener Benutzer

    Registriert seit:
    5. Dezember 2019
    Beiträge:
    760
    Danke erhalten:
    235
    Danke vergeben:
    94
    Das passiert eigentlich nur dann, wenn man die H1-H... als Design Instrument nutzt.
     
  6. Anonymous

    Anonymous Aktives Mitglied

    Registriert seit:
    15. Oktober 2020
    Beiträge:
    28
    Danke erhalten:
    0
    Danke vergeben:
    15
    Vielen Dank für eure Hilfe und die Tipps!
    Es funktioniert jetzt wie es soll