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!
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-Textformatierung Thomas Saake 5 80 Gestern, 14:06
Letzter Beitrag: Thomas Saake
  og:image für Facebook in Mobirise barbara0701 2 49 Gestern, 13:17
Letzter Beitrag: Tommy Herrmann
  Mobirise blendet sich selbst ein stobi_de 4 89 13.01.2018, 19:49
Letzter Beitrag: Tommy Herrmann
  Bilder zuschneiden in Mobirise barbara0701 5 102 13.01.2018, 18:20
Letzter Beitrag: barbara0701
  Mobirise PortfolioM4 - Block Clients barbara0701 9 144 13.01.2018, 12:16
Letzter Beitrag: barbara0701
  Mobirise-Navibox Strich unten einfügen Thomas Saake 9 184 08.01.2018, 22:14
Letzter Beitrag: Rancher
  Mobirise-Unnötiger farblicher Abstand zwischen Boxen Thomas Saake 16 273 08.01.2018, 19:51
Letzter Beitrag: Rancher
  Logo in Navigationsleiste einfügen - Mobirise barbara0701 28 346 06.01.2018, 18:32
Letzter Beitrag: Martin73
  Mobirise integrierter Slider WRH 10 267 06.01.2018, 16:32
Letzter Beitrag: WRH
  Linkformate anpassen Mobirise barbara0701 7 183 05.01.2018, 13:03
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!