Größe des Logos auf Mobilgeräten vergrößern (responsive Design)

    Hallo Zusammen,


    Ich habe für meinen Onkel die Homepage umgebaut (neues Template, Grafik, Design, SSL, ...) und komme an einer Stelle einfach nicht weiter:

    tierarztpraxis-kruegel.de


    Das Design wird bei Auflösung <767px stark angepasst (responsive), was auch so gewünscht ist.

    Dabei wird allerdings das Logo extrem stark verkleinert.

    Ich habe schon alles probiert, bekomme das aber einfach nicht größer ...

    Im Moment scheint es so ca. 40% der Breite einzunehmen, Ziel wären 80-90% (fast wie bei der Seite in Normalansicht).


    Ich freue mich sehr über eure Unterstützung!

    Gruß,

    Matthias

    Hallo Matthias,

    da kann ich dir nicht wirklich helfen, denn ich kenne das Template(Framework) nicht. Warum das Logo so klein ist, ist klar, es ist an einer Stelle platziert, die bei kleinen devices sehr klein ausfällt. Teste mit F12 oder Inspector.


    Aber - obwohl das nicht gefragt ist:

    1) Könntest du nicht einfach das Standardtemplate Protostar verwenden? Das würde es dir in vielen Bereichen einfacher machen.

    2) Die Seite lädt sehr langsam, ich wollte schon wegklicken. Brauchst du den Slider? Ein einzelnes Bild wäre ausreichend. Der Slider bietet keinen Mehrwert.

    Hallo


    Der HTML-Code der Webseite sieht so aus, als würde beim Erstellen/Editieren eines Beitrags bzw. eines Moduls etwas reingehauen, was da so nicht hingehört:


    Code
    <div id="SL_balloon_obj" style="display: block;">
<div id="SL_button" class="SL_ImTranslatorLogo" style="background: rgba(0, 0, 0, 0) url('moz-extension://f9f03060-f55f-4c42-b869-4c5cb1477bbf/content/img/util/imtranslator-s.png') repeat scroll 0% 0%; display: none; opacity: 1; left: 374px; top: 546px;"><span style="color: #0000ff;"></span></div>
<div id="SL_shadow_translation_result2" style="display: none;"><span style="color: #0000ff;"></span></div>
<div id="SL_shadow_translator" style="display: none;">
<div id="SL_planshet">
...
...


    Könnte ein Browser-Addon sein, aber du solltest das unbedingt bereinigen, bevor du dich um die Grösse des Logos kümmerst.

    Es handelt sich um ein Yootheme-Template, wahrscheinlich noch ein Warp7.

    Das Problem hier ist, dass das Logo in einer dafür vorgesehenen Position (Modul) hinterlegt ist und (bei diesem Template-System bekannt) durch das Containerelement um das Logo )in Deinem Fall das <p>) das Bild nicht mehr in der Menüzeile bleibt, sondern um eine Zeile nach unten verrutscht.
    Berdenkt man das, wird das Logo richtig angezeigt, da sich die Skalierung an der Höhe orientiert und somit die Breite anpasst.

    Ich würde das anders lösen:

    1. Ich würde anstelle des Logos für die mobile Darstellung Text verwenden, dabei gilt zu beachten, Editor deaktivieren und alle Containerelemente entfernen.

    2. das Logo in einer Position unterhalb des Menüs platzieren, dann pass es sich in der Breite an die Displaygröße an, und somit auch in der Höhe.

    Hi,

    Vielen Dank für die Tipps!

    anka: ich bin mir leider nicht ganz sicher, was du dankt meinst:/

    Problem: das Template ist an sich fertig, da würde ich ungern in die Programmierung eingreifen, ohne wirklich Ahnung davon zu haben:(


    deGobbis: Danke für den Hinweis. Problem: wenn ich eine andere Position nehme, taucht das Logo auch in der regulären Ansicht dort auf... was dann die reguläre Seite zerlegt:(

    Das mit dem Text macht absolut Sinn, ist nur leider einem Tierarzt, der gerne sein Logo drin hätte, nicht so einfach beizubringen:rolleyes:


    Ich habe lange in den über 10.000 Zeilen CSS Skript rumgesucht, komme aber einfach nicht weiter, da ich nicht weiß, wie die Template Programmierung genau aufgebaut ist (Warp7, Less, ...)

    Ich hatte die Hoffnung, dass es vielleicht gar nicht "so" kompliziert ist und hier jemand spontan sagen kann an welcher Stelle in den Template Dateien die Änderung gemacht werden muss;)


    Vielen Dank euch nochmal, ich werde wohl doch erklären, dass es nicht so einfach ist und man hier auf Text gehen sollte:D