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-aktuelle Meldungen und Zeitleiste Thomas Saake 15 172 Vor 7 Stunden
Letzter Beitrag: Thomas Saake
  Mobirise-Sternchen zuviel beim Kontaktformular Thomas Saake 4 66 19.06.2017, 12:39
Letzter Beitrag: Thomas Saake
  Mobirise: Responsiver Hintergrund stobi_de 8 79 18.06.2017, 21:52
Letzter Beitrag: Martin73
  Mobirise BETA Tommy Herrmann 42 750 18.06.2017, 21:14
Letzter Beitrag: Martin73
  Mobirise-Editor und Social feed plugin Martin73 23 260 16.06.2017, 11:45
Letzter Beitrag: Raven
  Buttons in Mobirise struggle 2 86 09.06.2017, 10:50
Letzter Beitrag: struggle
  Mobirise und 'Bootstrap Studio' j-w-d 8 191 05.06.2017, 19:57
Letzter Beitrag: Raven
  Mobirise-Hamburger Navi Martin73 16 298 05.06.2017, 10:14
Letzter Beitrag: Martin73
  Mobirise-Gaststättenseite Bitte mal schauen Thomas Saake 19 394 04.06.2017, 20:44
Letzter Beitrag: Martin73
  Mobirise-Abstand zwischen den Blöcken Thomas Saake 17 332 04.06.2017, 11:25
Letzter Beitrag: Doris Rehhausen



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!