Impressum Suchfunktion

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobirise - Logogröße
#1
Mit den Zeilen
.navbar-dropdown .navbar-logo img {
height: 60%;
width: 60%;
}

.navbar-dropdown.navbar-short .navbar-logo img {
height: 40%;
width: 40%;
}

kann man ja die Logogröße bestimmen.
Im Tablet-Modus fehlt da aber was.
Wie ist denn die Syntax für die Logo-Größe mit mittleren Bereich?
Müsste sowas wie
.navbar-dropdown.navbar-medium sein.

Gruß aus Salzburg
Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

also eigentlich wird sich das Logo ja durch die Prozentzahl jedem Gerät anpassen (warum sollte dann etwas fehlen :confused: ), so steht es bei mir:

Code:
.navbar-dropdown .navbar-logo img {
height: 80%;
width: 80%;
}

.navbar-dropdown.navbar-short .navbar-logo img {
height: 40%;
width: 40%;
}

http://www.mobirise-tutorials.com/Farbverlauf-Body.html

In der CSS-Datei von Mobirise:

/assets/dropdown/css/style.css

stehen auch nur diese beiden Klassen.

Die Eigenschaft aus "navbar-short" ist ja lediglich, dass das Logo grundsätzlich am schmalen Handy eben bedeutend kleiner dargestellt werden soll, um nicht z.B. die Navi oder andere Elemente zu überdecken.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Tja, trotzdem habe ich diesen Effekt.
http://www.afripix.de/solteq
....
Aber eine Runde Nachdenken hilft oft.
Wenn ich den Browser zusammenschiebe und das Logo groß bleiben würde, würden Teile der Navi verschwinden. OK, dann ist es einfach so :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Habe jetzt nur das Handy hier und da passt es.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Das hatte ich bei "meinen" Logos im Banner:
http://www.vogtland-geschichte.de/Urgeschichte.html
Bei dir haben Menü und Logo im mittleren Bereich kein Platz!
Ich wollte es mit Media Queries und unterschiedlichen Prozentangaben korrigieren! Das geht aber nicht.
Ich habe eine Pseudotabelle von Doris umgeschrieben. Das ist für das Menü zu kompliziert. Vielleicht fällt dir aber etwas ein!
HTML:
Code:
<section class="containerT" style="padding-top:120px; padding-bottom: 40px;background-color: rgb(76, 76, 76);">

<div class="container">
       
   
<div id="Table-1" class="table">
<!--erste Zeile Spaltentitel -->

<div class="row-content">
<div id="Polster1" class="cell"></div>
<div class="cell"><h1>Interessengemeinschaft
   Ur- und Frühgeschichte</h1></div>
<div id="Polster2" class="cell"></div>    
<div id="Polster3" class="cell"></div>
</div>

<div class="row-content">
<div id="Polster4" class="cell"></div>
<div class="cell"><h2>Jörg Fischer</h2><br>
<h3>Lützowstraße 29, 08523 Plauen/Vogtl.<br>
Leiter der IG Ur- und Frühgeschichte<br>
Internet: <a href="mailto:joergfischerplauen@gmail.com" target="_blank">joergfischerplauen@gmail.com</a></h3></div>
<div id="logoUF" class="cell mbr-figure"></div>    
<div id="Polster6" class="cell"></div>
</div>
</div>
</div>

</section>    
CSS:
Code:
.container {box-shadow: 0 5px 32px 0 rgba(0, 0, 0, 0.5), 0 12px 40px 0 rgba(0, 0, 0, 0.1);background-color:grey}
h1{
width: 100%;
max-width: 1000px;
padding-top: 20px;
text-align: center;
color: #ffffff;  
font-family: Montserrat;font-weight:bold;
font-size: 25px;
}
h2{
width: 100%;
max-width: 1000px;
margin: auto;
text-align: center;
color: #ffffff;
font-family: Montserrat;font-weight:bold;
font-size: 18px;
}
h3{
width: 100%;
max-width: 1000px;
padding-top: 10px;
text-align: center;
color: #ffffff;
font-family: Montserrat;
font-size: 18px;
}

#logoUF {
background: url(http://www.vogtland-geschichte.de/assets/images/logoufgschriftdreiecks3-1-1400x1400.png);
background-size: contain;background-repeat: no-repeat;
background-position: top;
}

.table{
width: 100%;
display: table;

background-color:grey;
font-family: Montserrat;
font-size: 14px;
}

.row-content{
width:100%;    
display: table-row;
background-color:grey}

.row-content:nth-child(even)
{background-color:grey;}

.cell{
display: table-cell;
text-align: right;
padding: 10px 15px;
background: ;}

.cell:nth-child(2){text-align: left; width: 50%}
.cell:nth-child(odd){font-size: 16px; font-weight: bold}

/*..................................................................S C R E E N S   B I S   8 5 0 p x */
@media screen and (max-width: 850px){



.cell-head:nth-child(2){text-align: center}
.cell span{font-weight: bold; font-size: 18px;}
   .cell:nth-child(2){text-align: left; width: 80%}
.cell:nth-child(odd){font-size: 16px; font-weight: bold}
.cell:last-child{ max-width: 100px; float: right; text-align: center; padding: 3px 10px; }

}
@media screen and (max-width: 600px){
#logoUF {
background: url();
background-size: contain;background-repeat: no-repeat;
background-position: top;
}
 #Polster1 {display: none;}  
 #Polster2 {display: none;}
 #Polster3 {display: none;}  
 #Polster4 {display: none;}  
 #logoUF {display: none;}  
 #Polster6 {display: none;}  
   
h1{
width: 100%;
max-width: 1000px;
margin: auto;
text-align: center;
color: #ffffff;
font-family: Montserrat;font-weight:bold;
font-size: 18px;
letter-spacing: 2px;}
h2{
width: 100%;
max-width: 1000px;
margin: auto;
text-align: center;
color: #ffffff;
font-family: Montserrat;font-weight:bold;
font-size: 16px;
letter-spacing: 1px;}
h3{
width: 100%;
max-width: 1000px;
margin: auto;
text-align: center;
color: #ffffff;
font-family: Montserrat;
font-size: 16px;
letter-spacing: 1px;}

}
Du könntest im mittl. Bereich (Tablet) die paddings oder die Schriftgröße des Menüs verkleinern!
Keine Zeit, muss Haare machen!
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise 4 Tommy Herrmann 59 1.846 Vor 7 Stunden
Letzter Beitrag: Tommy Herrmann
  Mobirise-Our Clients Thomas Saake 21 352 23.09.2017, 11:51
Letzter Beitrag: Thomas Saake
  Mobirise und Google-Analytics stobi_de 2 68 17.09.2017, 13:33
Letzter Beitrag: stobi_de
  Neues Mobirise Thema Agency M4 Tommy Herrmann 16 512 15.09.2017, 09:49
Letzter Beitrag: Tommy Herrmann
  Mobirise - Menü-Leiste WRH 2 102 12.09.2017, 17:42
Letzter Beitrag: WRH
  Mobirise-Rahmen um Foto Thomas Saake 12 191 12.09.2017, 11:03
Letzter Beitrag: Martin73
  Cookies und Mobirise vloppy 2 76 11.09.2017, 18:54
Letzter Beitrag: Raven
  Beschriftung von Videos in Mobirise Martin73 3 83 07.09.2017, 12:08
Letzter Beitrag: Martin73
  Interaktion von Mobirise- und eigenen Klassen Martin73 1 126 01.09.2017, 09:08
Letzter Beitrag: Tommy Herrmann
  Mobirise- Strich unter die letzte Tabellenzeile Thomas Saake 3 141 29.08.2017, 17:25
Letzter Beitrag: Martin73



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!