#31

alexB

Mitglied  (49 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

damit, hat sich nichts getan:

#logo {
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 20px 0 20px;
	box-sizing: border-box;
}

#logo>img {
	max-width: 780px;
	height: auto;
	display: block;
	border: 0;
	box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	#logo>img {
		max-width: 520px;
		height: auto;
	}
}

weder auf dem desktop noch auf dem smartphone etwas getan, so wie die ursprungsversion und wie gesagt handy ist am wichtigsten, also was nun?


Dieser Beitrag wurde bereits 2 mal bearbeitet, zuletzt von »alexB« (08.08.2023, 18:51)
#32

MuggelClan

Forum-Sponsor  (837 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

ok, durch das @media screen.... wird ja das Logo verkleinert, daher lösche mal die folgenden Zeilen:

@media screen and (max-width: 767px) {
 #logo>img {
  max-width: 260px;
  height: auto;
 }
}


UND



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

Dann müsste normalerweise das Logo beim Smartphone sich nicht mehr verkleinern.

 

Was ich allerdings bei deinem Feedback nicht verstehe ist, dass sich das Headerbild vorhin geändert hatte, dass eigentlich gar nicht sein kann, da #sqrheadertopbox separat zu #headercontainer ist. Bei mir war auf deiner Homepage kein Veränderung des Headerbildes ersichtlich.

Aber wie gesagt, ich habe das Design nicht und kann leider nicht alle Dateien überblicken.

Eventuell ist das Logo auch in der Datei "global.ccml" mit einer Größe definiert ?


Mit freundlichen Grüßen

Thomas

Web To Date seit 2004, Siquando Web 12, Pro Web 8, Web Client 

#33

alexB

Mitglied  (49 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

ja auf dem desktop hat sich vorhin das headerbild auch nicht verändert nur auf dem smartphone, entweder ist es größer geworden oder hat sich nachtteilig verschoben und BITTE, ich habe alles wieder zurück gesetzt, schicke mir bitte nochmal genau, was ich am ursprungscode JETZT ändern soll, danke ps und wie gesagt nur auf dem smartphone soll es größer werden aber ohne das sich das headerbild vergörßert oder verschiebt

 


Dieser Beitrag wurde bereits 4 mal bearbeitet, zuletzt von »alexB« (09.08.2023, 16:58)
#34

alexB

Mitglied  (49 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

also ich muss von gestern korrigieren:

also, habe gerade mehrer Möglichkeiten probiert


#sqrheadertopbox h1 {
color: #ffffff;
font-size: 64px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
font-weight: 300;
max-width: 1100px;
box-sizing: border-box;
}

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

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

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

#sqrheadertopbox img {
height: 40px;
}
}

bei manchen z.b. der letzte height: 40px; wenn ich den auf 90px oder sogar auf 120px stelle ich auf dem Smartphone perfekt aber auf dem desktop ist dann auf einmal VIEL zu klein, was mit gestern gar nicht aufgefallen ist, wegen dem cachee

 

#35

MuggelClan

Forum-Sponsor  (837 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

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.


Mit freundlichen Grüßen

Thomas

Web To Date seit 2004, Siquando Web 12, Pro Web 8, Web Client 

1864 Aufrufe | 35 Beiträge