Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Logo in der mobilen Ansicht zu groß!
#1
Exclamation 
Hallo Zusammen!

Ich habe mit Mobirise 4.10.10 (und früher) das Problem, dass (bei eigentlich allen Themen) ein längeres Logo in der mobilen Ansicht viel zu groß dargestellt wird und somit über den Bildschirmrand hinaus ragt.

Vom Mobirise-Support bekommt man leider diesbezüglich keine Hilfe und im WWW habe ich auch keine Lösung dazu gefunden. Ich selbst probiere schon lange das Problem mit dem Code-Editor irgendwie gelöst zu bekommen, allerdings ohne Erfolg.

Im Bild verwende ich als Beispiel zum Testen das Agency M4 Theme:

[Bild: mobirise-4.10.10-logodujrh.gif]

Hat von euch jemand einen Rat, mit welchen genauen Attributen man das Problem in den Griff bekommen kann?  
Huh

Einen schönen Abend und ein tolles Wochenende!
Justin


Angehängte Dateien
.gif  mobirise-4.10.10-logo-problem.gif (Größe: 452,12 KB / Downloads: 4)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Hallo Justin,
willkommen hier im Forum. :hallo:
Das Problem kann man eigendlich nicht lösen! Ein langes Logo kann auf kleinem Bildschirm nicht abgebildet werden. Mobirise setzt automatisch ganz gute Breakepoints, d.h. Bilder werden der Größe nach an den Bildschirm angepasst. Das funktioniert natürlich nur bei weitgehend quadratischen Bildern.

In Deinem Fall musst Du bei Smartphonegröße über @media screen ein anderes (quadratisches) oder gar kein Logo darstellen! Alternativ könntest Du das Logo der Länge nach begrenzen, wobei die Reduktion der Höhe es dann unansehnlich wirken lässt!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Question 
Hallo Martin!  Smiling 

Wenn ich das selbe Bild in ein normalen Image-Block setze, orientiert sich das Logo aber komplett an der Breite und wird auch auf Mobilgeräten komplett dargestellt. Klar, es wirkt dadurch sehr klein, aber das ist erstmal nebensächlich für mich.

Es ist komisch, dass ein Image-Block die komplette Breite in der mobilen Ansicht beachtet und das Logo dementsprechend skaliert, aber der Menü-Block diese Attribute anscheinend ignoriert.

Wenn das mit einem normalen Bilder-Block geht, finde ich, müsste es auch eine Möglichkeit geben, dass es genauso im Header funktioniert.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Moin Justin,

willkommen bei uns im Forum :hallo:

Um richtig helfen zu können, benötigt man immer einen Link zur betroffenen Seite, damit man in die Quelltexte und die CSS-Dateien gucken kann.

Wir hatten hier gerade erst ein ähnliches Problem, allerdings bei einem anderen Mobirise-Thema. Es ist denkbar, dass Du bei Dir aber auch die maximale Breite für Dein Logo in der CSS einstellen kannst.

https://www.nof-schule.de/forum/t-logo-i...#pid138575

Theoretisch könntest Du also z.B. dem <img> Tag vom Logo noch z.B. eine id="mylogo" geben:

Code:
@media (max-width: 768px) {
  #mylogo {
    max-width: 150px;
  }
}

... und damit die Breite vom Logo bei der Handy-Ansicht auf eine maximale Breite setzen. Da hier aber oft in der Navi eine feste Höhe eingestellt ist, könnte sich das Logo verzerren. Das müsste man dann testen ...


.jpg  Desktop.JPG (Größe: 165,32 KB / Downloads: 9)



.jpg  Handy.JPG (Größe: 90,93 KB / Downloads: 9)



.jpg  Code.JPG (Größe: 186,63 KB / Downloads: 10)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
@Justin: Mobirise skaliert die Bilder in den Blöcken in der Regel nach dem Verhältnis Höhe zu Breite. Das macht das Programm bei der Navi nicht, da diese immer lang und schmal ist. Das würde dann kaum erkennbar/lesbar sein. Deshalb setzt Mobirise über Classen und Media-Anweisungen rechts und links einen breiten Rahmen (Tablet), der dann am Smartphone wegfällt. Für Text und Logo stehen dann in der Navigation nur der mittige Teil der Navigation zur Verfügung.
Bei langen Logos musst Du, wie Tommy beschrieben hat, diese Vorgehensweise von Mobirise per Code-Editor-Eintrag ändern.
Alternativ könnte man die Classen entfernen und selbst definieren oder eine fremde Navigation verwenden (Die Mobirise-Navigation steht oft in der Kritik!). Ersteres kann ich nicht empfehlen, weil das sehr kompliziert ist (Mobirise hat sehr viele verschachtelte Classen).
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Rainbow 
Hallo Zusammen  :winken2:

Vielen Dank erst einmal, dass Ihr die neuen Hier im Forum so nett willkommen heißt und euch auch die Zeit nehmt Problemursachen herauszufinden und schnell Hilfe sowie Ratschläge anzubieten!

Ich habe wieder einige Stunden damit vollbracht und viel herumexperimentiert...

(20.10.2019, 05:26)Tommy Herrmann schrieb: Wir hatten hier gerade erst ein ähnliches Problem, allerdings bei einem anderen Mobirise-Thema. Es ist denkbar, dass Du bei Dir aber auch die maximale Breite für Dein Logo in der CSS einstellen kannst.

https://www.nof-schule.de/forum/t-logo-i...#pid138575

Theoretisch könntest Du also z.B. dem <img> Tag vom Logo noch z.B. eine id="mylogo" geben und damit die Breite vom Logo bei der Handy-Ansicht auf eine maximale Breite setzen. Da hier aber oft in der Navi eine feste Höhe eingestellt ist, könnte sich das Logo verzerren. Das müsste man dann testen ...

@Tommy: Dieser Lösungsansatz hat schonmal ganz gut funktioniert und ich habe mich (erneut) sehr intensiv dem anderen Beitrag gewidmet. Durch viel Experimentieren hat es auch soweit geklappt, dass das Logo vollständig angezeigt wird. Einzig das Problem mit der auftretenden Verzerrung bekam ich nicht in den Griff.

Durch langes suchen im Internet bin ich auf die Thematik "Art Direction" mit dem <picture>-Element gestoßen: blog.kulturbanause.de // Responsive Images – , srcset, sizes & Co.

Ich habe nun einen Kompromiss für mich gefunden, dass ich auf den mobilen Seiten ein angepasstes Logo benutze, das nicht sonderlich breit ist. Zum Beispiel das Favicon. Ich tausche also je nach aktueller Auflösung (mobil, also kleiner 750px oder größer) mit der Source-Set (srcset) Funktion die Bilddatei aus.

Der HTML-Code ändert sich also wie folgt von
Code:
<div class="menu-logo">
 <div class="navbar-brand">
 <span mbr-if="showLogo" class="navbar-logo">

   <img id="mylogo" src="longlogo.png" mbr-style="{'height': logoSize + 'rem'}" title>

[...]

zu
Code:
<div class="menu-logo">
 <div class="navbar-brand">
 <span mbr-if="showLogo" class="navbar-logo">

   <picture alt="" mbr-style="{'height': logoSize + 'rem'}" title>
     <source media="(min-width: 750px)" srcset="longlogo.png">
     <source srcset="shortlogo.png">
    
     <img  id="mylogo" src="longlogo.png">
   </picture>

[...]

Das <img>-Element dient nur als Fallback für ältere Browser, so wie im Artikel beschrieben.

Mit dieser Lösung bin ich soweit recht zufrieden.
Ich danke Euch für die vorallem schnelle Hilfe!

huepf:
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
supi  thumbs up

Das HTML <source> Media-Attribut kannst Du natürlich verwenden, Mobirise selbst macht das immer über die CSS-Dateien, also mit Media-Queries ...

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

... die man dann einfach in den Bereich "CSS Editor" vom "Code Editor" des jeweiligen Blocks eintragen kann.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Question 
(21.10.2019, 05:35)Tommy Herrmann schrieb: Mobirise selbst macht das immer über die CSS-Dateien, also mit Media-Queries, die man dann einfach in den Bereich "CSS Editor" vom "Code Editor" des jeweiligen Blocks eintragen kann.

Hallo  :winken2:

Hast du dafür mal ein praktisches Code-Beispiel?
Werde aus dem Artikel nicht ganz schlau in Bezug auf verschiedene Bildquellen...

Schönen Abend!

:prost:
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
... im Prinzip macht ja Mobirise alles mit Media-Queries. Gucke einfach mal in die CSS-Dateien, wie z.B. diese hier:

... dort habe ich z.B. einen anderen Hintergrund im obersten Block eingetragen, der sich dann in dieser "Customer" CSS-Datei wieder finden lässt:

http://www.mobirise-tutorials.com/Testse...tional.css

Code:
@media (max-width: 768px) {
  .cid-rdwtD9G9lF {
    background-image: url("http://www.mobirise-tutorials.com/Testseiten/Software-Ende/assets/images/mbr-1920x1286.jpg");
  }
}

... also z.B. auf dieser Testseite von mir siehst Du diesen roten Sonnenuntergang-Hintergrund im Block oben:

http://www.mobirise-tutorials.com/Testse...ware-Ende/

... wechsele nun auf Handy-Ansicht (kleiner 768px) (oder schiebe Dein Browser-Fenster zusammen) und der Hintergrund wechselt auf dieses blaue Strandbild:

http://www.mobirise-tutorials.com/Testse...0x1286.jpg
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
(19.10.2019, 20:28)Martin73 schrieb: Hallo Justin,
...
In Deinem Fall musst Du bei Smartphonegröße über @media screen ein anderes (quadratisches) oder gar kein Logo darstellen!
...
Das Problem ergibt sich doch nur bei ganz kleinen Bildschirmen (unter 500px, bzw.768px).
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise-Tabelle in PC Ansicht verkleinern Thomas Saake 2 305 28.12.2019, 16:05
Letzter Beitrag: Thomas Saake
  Logo-Anzeige in Google stobi_de 4 464 22.12.2019, 21:58
Letzter Beitrag: stobi_de
  Logo in der Mobilien Ansicht ändern jomini 5 555 18.10.2019, 10:54
Letzter Beitrag: jomini
  Mobirise-Hamburger zentriert unter Logo Thomas Saake 3 489 27.09.2019, 16:10
Letzter Beitrag: Thomas Saake
  Bild zu groß stobi_de 3 462 24.09.2019, 07:23
Letzter Beitrag: stobi_de
  Mobirise 4 Parallax: Bilder auf mobilen Geräten pixelig CeDe 6 532 07.09.2019, 17:37
Letzter Beitrag: stobi_de
  Spezielles Logo stobi_de 24 1.370 09.08.2019, 19:17
Letzter Beitrag: Doris Rehhausen
  Logo auf die rechte Seite? stobi_de 4 576 20.07.2019, 10:12
Letzter Beitrag: Tommy Herrmann
  Logo in der Mitte? stobi_de 2 407 24.06.2019, 11:36
Letzter Beitrag: stobi_de
Smile Schriftgrößen auf mobilen Endgeräten scheselong 3 551 11.06.2019, 13:38
Letzter Beitrag: Tommy Herrmann



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!