Logo Größe Titanium Web 12

Hy, kann man das logo nicht größer machen. Auf dem Desktop aber besonders auf dem Smartphone? Ich habe das Gefühl als wenn das Logo nicht responsiv ist, das sieht auf dem Handy viel zu klein aus. Vermutlich wieder ein bug in der Programmierung. Gibt es da irgendwie Abhilfe oder Tricks? 

Das würde mich auch interessieren?

Die Größe des Logos kannst du durch Änderung des folgenden Codes tun (Dieser ist mehrmals vorhanden):

	#sqrheadertopbox img {
		height: 120px;
		width: auto;
	}

Siehe HIER meinen Beitrag für mehr informationen.

Ergänzung:

Ich habe zwar das Design Titanium nicht, aber ich denke, dass die Struktur des Design gleich zu den anderen Design sein wird:

Es müsste im Design-Ordner auf dem PC folgende Datei geben (berichtigt mich falls es nicht so ist, eventuell hat ja jemand anderes noch das Design):

C:\Program Files (x86)\SIQUANDO\Web 12\designs\titanium\style_design.css

Diese Datei durch kopieren oder umbenennen sichern (damit man alles wieder Rückgängig machen kann) und dann die Änderungen in dieser Datei "style_design.css" durchführen.
Natürlich gilt diese Änderung dann für alle Projekte, die dieses Design bzw. diesen Design-Ordner verwenden.

Hy Muggel Clan, wie gesagt das funktioniert nicht richtig das Logo wird dann größer aber das header Bild verschiebt sich und hat einen anderen Ausschnitt auf dem Smartphone. Was kann ich noch tun um nur das Logo auf dem Smartphone größer zu bekommen ohne dass ich das Header Bild verändert auf dem Smartphone?

wie du in den Forenregeln lesen kannst sind Hilfe-Anfragen per PN nicht erlaubt.

Die Größe Desktop-Logo und Smartphone-Logo ist voneinander unabhängig, da du im Code die maximale Pixelgröße des Bildschirm angibst:

#sqrheadertopbox img {
 display: block;
 height: 120px;
 width: auto;
}

@media screen and (max-width: 767px) {
 #sqrheadertopbox h1 {
  font-size: 32px;
 }
 
 #sqrheadertopbox img {
  height: 90px;
  width: auto;
 }
}

Was über "@media screen and (max-width: 767px)" steht ist der Desktop und was darunter steht ist Smartphone oder Tablet. Hier habe ich jetzt 120px für Desktop definiert und 90px für Smartphone/Tablet.

Das Headerbild (Eyecatcher, Video) wird mit "width" und "height" beim folgenden Code angegeben (hier orginal mit jeweils 100%), du kannst aber auch px oder auto angeben:

header #headercontainer img, header #headercontainer video {
 width: 100%;
 display: block;
 border: 0;
 position: absolute;
 height: 100%;
}

Beispiel-Änderung:

header #headercontainer img, header #headercontainer video {
 width: 100%;
 display: block;
 border: 0;
 position: absolute;
 height: auto;
}

Dieser Code wirkt sich auf alle Displays aus, da diese nicht mit "@media screen and (max-width: 767px)" für Smartphone/Tablet angegeben wurde.

Mehr kann ich nicht helfen, da ich das Design nicht habe. Eventuell kann Dir jemand helfen, der auch dieses Design verwendet.

 so DANKE, ich habe jetzt für meine seite,headerbild und logo das beste erreicht und zwar so /// weil je größer es wird, wanderst es leider nach rechts oder kann man das auch noch einstellen was weiter nach links angezeigt wird, aber NUR auf dem Desktop? Smartphone ist so gut

#sqrheadertopbox img {
display: block;
height: 95px;
width: auto;
}

@media screen and (max-width: 767px) {
#sqrheadertopbox h1 {
font-size: 32px;
}

#sqrheadertopbox img {
height: 125px;
}
}

Über den Code den du bereits bearbeitet hast findest du folgenden Code:

#sqrheadertopbox>div {
	max-width: 1100px;
	padding: 0 40px;
	box-sizing: border-box;
	margin: 0 auto;	
}

Diesen Code ersetzt du mit folgende beiden Codes, bzw. du musst folgende ändern/hinzufügen:

#sqrheadertopbox>div {
	max-width: 1100px;
	padding: 0 10px;
	box-sizing: border-box;
	margin: 0 0 0 10px;	
}

@media screen and (max-width: 767px) {
#sqrheadertopbox>div {
	max-width: 767px;
	padding: 0 40px;
	box-sizing: border-box;
	margin: 0 auto;	
}
}

Der Befehl "padding: 0 10px;" setzt das Logo auf ein Abstand 10px vom linken Rand. Wie viel cm das auf deinem Bildschirm ausmacht, das ist abhängig wie groß dein Bildschirm ist und welche Auflösung du m Bildschirm eingestellt hast.

Ergänzung: mit dem Befehl "margin: 0 0 0 10px;" bringst du das Logo noch weiter nach links. Im Code ergänzt.

Ok danke und warum soll ich den zweiten code auch ändern? Und mit der paddingänderung ändert sich aber nur die Desktop-Version oder auch die Smartphone Version? 

Guten Morgen, 

Ersetzt einfach den vorhandenen ersten Code im ersten grauen Codekasten (Beitrag #10), komplett mit dem zweiten grauen Codekaste in dem ich meine Ergänzungen gemacht habe.

Ich habe aus einem Code zwei Codes gemacht. Schau es dir mal genauer an.

Änderungen für Desktop:

#sqrheadertopbox>div { max-width: 1100px; padding: 0 10px; box-sizing: border-box; margin: 0 0 0 10px; }

Neu hinzugefügt für Smartphone/Tablet:
@media screen and (max-width: 767px) { #sqrheadertopbox>div { max-width: 767px; padding: 0 40px; box-sizing: border-box; margin: 0 auto; } }

Hoffe dass es mit Farbgestalltung etwas klarer wird, was du anpassen kannst um das Logo zu verschieben.

hy, Muggel Clan

ich habe es jetzt nur so geändert, auf dem pc:

#sqrheadertopbox>div {
max-width: 1100px;
padding: 0 1px;
box-sizing: border-box;
margin: 0 auto;
}

#sqrheadertopbox img {
display: block;
height: 100px;
width: auto;
}

allerdings hätte ich das gerne noch einen Tacken weiter nach links, was muss ich dann hier beim padding eintragen? anstatt 0 1px dann 0 -5px?

ich denke perfekt wäre es aktuell noch 8 mm nach links und dann mit height: 105px; noch vergrößer dadurch würde er sich ja wieder leicht nach rechts bewegen, muss halt von dir nur wissen, wie ich das padding: 0 1px; noch kleiner(mit dem Ergebniss das Logo auf dem Desktop noch weiter nach links geht)

ach wobei 5mm nach links dann sitzt das perfekt das logo ohne weiter zu vergrößern

STOPP, es ist leider auf dem Smartphone AUCH nach links gewandert das ist natürlich Käse sollte ja nur auf dem Desktop so sein

padding-, und margin-Schreibweisen:

0px 0px 0px 0px; = Links, Oben, Rechts, Unten;.

0px 0px; = 1er Wert Oben und Unten, 2er Wert Rechts und Links,

Möchtest du den Paddingwert negative nach Links verschieben, schreibe: 0px 0px -3px(als Beispiel) 0px;

Teste doch am Besten das mit den Marginwerten. Anstatt: 0 auto; schreibst du: 0px auto 0px -3px;

Zur besseren Orientierung füge einfach ein Border um dein #sqrheadertopbox>div{.... =

#sqrheadertopbox>div {
max-width: 1100px;
padding: 0 1px;
box-sizing: border-box;
margin: 0 auto;

border: 1px solid red; /* den kannst du dann später einfach wieder löschen!*/
}

Marginwerte sind in einem DIV immer die Außenwerte des Divs, Paddingwerte sind immer die Innenwerte des Inhaltes des Divs (Abstände zu einander).

Es gibt Hunderte von Seiten im Netzt wo man css und html lernen kann um solche Sachen auch ohne fremde Hilfe in Anspruch nehmen zu müssen.

Tante Google ist dein Freund:in... Grüße Data

Nachtrag:

Für die mobile Ansicht:

@media screen and (max-width: 767px) {

.......

.......

}

fügst du einfach die vorangegangenen Styleangaben:

#sqrheadertopbox>div {
max-width: 1100px;
padding: 0 1px;
box-sizing: border-box;
margin: 0 auto;

border: 1px solid red; /* den kannst du dann später einfach wieder löschen!*/
}

zu und änderst entsprechenden den margin-Wert, und schaust wie es in der mobilen Ansicht passt!

Grüße Data