Titelbild wird abgeschnitten bei Mobilgerät
Titelbild wird abgeschnitten bei Mobilgerät
Hallo miteinander.
Ich möchte eine Seite mit einem Template von Torsten Behrens (n3201) aufbauen. Das Titelbild bei Torsten ist 900 x 400px groß und wird im Smartphone auch in der gesamten Breite angezeigt. Nur in der Höhe werden oben und unten werden Teile abgeschnitten. Das Titelbild ist mir für die websitezu hoch. Darum habe ich nun ein Bild erstellt mit den Maßen 900 x 120px. Im style.css habe ich auch die Höheangepasst und es sieht auf demRechner auch so aus,wie gewünscht. Nur auf dem Smartphone wird nur der mitttlere Teil des Bildes gezeigt. Rechts und Links wird es abgeschnitten.
Hat Jemand eine Idee, wo ich etwas falsch gemacht haben könnte und wie und wo ich das beheben kann, damit das Bild in der gesamten Breite korrekt dargestellt wird?
Vielen Dank
Jürgen
Ich möchte eine Seite mit einem Template von Torsten Behrens (n3201) aufbauen. Das Titelbild bei Torsten ist 900 x 400px groß und wird im Smartphone auch in der gesamten Breite angezeigt. Nur in der Höhe werden oben und unten werden Teile abgeschnitten. Das Titelbild ist mir für die websitezu hoch. Darum habe ich nun ein Bild erstellt mit den Maßen 900 x 120px. Im style.css habe ich auch die Höheangepasst und es sieht auf demRechner auch so aus,wie gewünscht. Nur auf dem Smartphone wird nur der mitttlere Teil des Bildes gezeigt. Rechts und Links wird es abgeschnitten.
Hat Jemand eine Idee, wo ich etwas falsch gemacht haben könnte und wie und wo ich das beheben kann, damit das Bild in der gesamten Breite korrekt dargestellt wird?
Vielen Dank
Jürgen
CMSimple_XH 1.7.5
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Re: Titelbild wird abgeschnitten bei Mobilgerät
Hast Du es schon mit @mediaquerry versucht? Oder noch besser mit z.B.Eliquas wrote:Nur auf dem Smartphone wird nur der mitttlere Teil des Bildes gezeigt. Rechts und Links wird es abgeschnitten.
Code: Select all
.title img{
width: 100%;
height: auto;
max-height: <wasimmer passt>;
}
Code: Select all
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php echo head();?>
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.
Re: Titelbild wird abgeschnitten bei Mobilgerät
Danke für Deine Tipps, aber wenn ich in der style.css etwas verändere, wird der header gar nicht mehr angezeigt, bzw. erscheint linksbündig. Ich weiß nicht,wo ich was ändern soll.
Hier der Text aus der style.css:
.art-header /* GROESSE TITELBILD */
{
-webkit-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
margin:10px auto 0;
background-repeat: no-repeat;
height: 120px;
background-image: url('images/header.jpg');
background-position: 0 0;
position: relative;
width: 900px;
z-index: auto !important;
}
.custom-responsive .art-header
{
background-image: url('images/header.jpg');
background-position: 0 0;
}
.default-responsive .art-header,
.default-responsive #art-header-bg
{
background-image: url('images/header.jpg');
background-position: center center;
background-size: cover;
}
.art-header>.widget
{
position:absolute;
z-index:101;
}
Hier der Text aus der style.css:
.art-header /* GROESSE TITELBILD */
{
-webkit-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
margin:10px auto 0;
background-repeat: no-repeat;
height: 120px;
background-image: url('images/header.jpg');
background-position: 0 0;
position: relative;
width: 900px;
z-index: auto !important;
}
.custom-responsive .art-header
{
background-image: url('images/header.jpg');
background-position: 0 0;
}
.default-responsive .art-header,
.default-responsive #art-header-bg
{
background-image: url('images/header.jpg');
background-position: center center;
background-size: cover;
}
.art-header>.widget
{
position:absolute;
z-index:101;
}
CMSimple_XH 1.7.5
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Re: Titelbild wird abgeschnitten bei Mobilgerät
Eliquas wrote:Das Titelbild ist mir für die websitezu hoch. Darum habe ich nun ein Bild erstellt mit den Maßen 900 x 120px. Im style.css habe ich auch die Höheangepasst und es sieht auf demRechner auch so aus,wie gewünscht. Nur auf dem Smartphone wird nur der mitttlere Teil des Bildes gezeigt. Rechts und Links wird es abgeschnitten.
Hat Jemand eine Idee, wo ich etwas falsch gemacht haben könnte und wie und wo ich das beheben kann, damit das Bild in der gesamten Breite korrekt dargestellt wird?
Code: Select all
.responsive .art-header {
width: auto !important;
max-width: none !important;
min-height: 100px !important; /* <--- das ändern zu 30px oder evtl. auskommentieren/löschen */
min-width: 0 !important;
margin-top: 1%;
margin-right: 1% !important;
margin-left: 1% !important;
text-align: center;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Titelbild wird abgeschnitten bei Mobilgerät
Danke für die Antwort. Finde ich diesen Text in der Style.css oder muss ich diesen kopieren und dort einfügen?
CMSimple_XH 1.7.5
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Re: Titelbild wird abgeschnitten bei Mobilgerät
Das findest du in der style.responsive.css ab Zeile 84, dort das min-height ändern wie oben beschrieben.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Titelbild wird abgeschnitten bei Mobilgerät
Hallo Ick.
Habe jetzt beide Vesionen probiert(auf 30 px setzen und auskommentieren), mit dem Erfolg, dass nun überhaupt kein Bild mehr zu sehen ist. Die Seite beginnt sofort mit dem Menue. Habe nun wieder auf die ursprüngliche style.responsive.css zurück gesetzt,damit wenigstens das "abgeschnittene" Bild zu sehen ist.
Was ist falsch gelaufen?
Habe jetzt beide Vesionen probiert(auf 30 px setzen und auskommentieren), mit dem Erfolg, dass nun überhaupt kein Bild mehr zu sehen ist. Die Seite beginnt sofort mit dem Menue. Habe nun wieder auf die ursprüngliche style.responsive.css zurück gesetzt,damit wenigstens das "abgeschnittene" Bild zu sehen ist.
Was ist falsch gelaufen?
CMSimple_XH 1.7.5
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Re: Titelbild wird abgeschnitten bei Mobilgerät
Schwierig etwas zu raten, wenn man die Umstände nicht kennt.
Vor allem: Wie sieht das Bild aus?
Es ist beinahe nicht zu vermeiden, dass immer irgendwo etwas abgeschnitten wird.
Versuch:
in style.css ca. Zeile 478:
und in Zeile 463:
Falls das auch nicht deinen Vorstellungen entspricht, solltest du womöglich einen Link posten und uns auch das Bild zeigen.
Bei den Templates von TB ist es immer besonders schwierig, solche Sachen zu lösen, weil die Templates recht komplex sind und teilweise auch Skripte eingreifen.
Vor allem: Wie sieht das Bild aus?
Es ist beinahe nicht zu vermeiden, dass immer irgendwo etwas abgeschnitten wird.
Versuch:
in style.css ca. Zeile 478:
Code: Select all
.custom-responsive .art-header {
background-image: url('images/header.jpg');
background-position: center;
background-size: cover;
}
Code: Select all
.art-header {
...
height: 120px;
...
}
Bei den Templates von TB ist es immer besonders schwierig, solche Sachen zu lösen, weil die Templates recht komplex sind und teilweise auch Skripte eingreifen.
Re: Titelbild wird abgeschnitten bei Mobilgerät
Leider bringt auch das keine Änderung des Problems. Hier einmalder Link zur Seite: http://elias-webdesign.de/assistent_xh/
CMSimple_XH 1.7.5
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Advancedform 1.1
Fa 1.3
Filebrowser for CMSimple_XH 1.7.5
Hi_updatecheck 1.4
Jquery 1.6.4
Meta_tags for CMSimple_XH 1.7.5
Pagemanager 3.6
Page_params for CMSimple_XH 1.7.5
Tinymce4
PHP 8.2.1
Re: Titelbild wird abgeschnitten bei Mobilgerät
Aha. Jetzt sieht man etwas klarer.
Überlegung:
Den Seiten-Titel als Bild darzustellen (statt als Text) ist überhaupt keine gute Idee.
Es wird bei dieser Konstellation unmöglich sein, dieses Bild in allen Viewportgrößen richtig darzustellen - ohne Beschnitt.
Außerdem ist das Bild weder für Google noch für Screenreader lesbar. Deine Seite hätte keinen Titel.
Du könntest jetzt den ausgeblendeten Sitenamen (h1) wieder einblenden und nach deinen Wünschen stylen.
Du könntest den Header-Hintergrund auf background: #85cff2; setzen.
Du könntest den blauen Kreis (Sticker: +55) als Bild neu in den Header setzen - oder auch als CSS-Element (rund).
Das wird eine mächtige Fummelei, weil hier nicht nur ein Stylesheet zu ändern wäre.
Ich möchte dich nicht entmutigen: Aber auch mit sehr guten CSS-Kenntnissen wird das alles sehr schwierig und aufwendig.
Ich tue mich immer sehr schwer mit solchen Tipps, aber in diesem Fall solltest du dich vielleicht doch lieber nach einem anderen Template umsehen.
Ich sehe voraus, dass es sehr lange dauern wird, bis du ein Ergebnis hast - und das wird vielleicht nichtmal deinen Wünschen entsprechen.
Überlegung:
Den Seiten-Titel als Bild darzustellen (statt als Text) ist überhaupt keine gute Idee.
Es wird bei dieser Konstellation unmöglich sein, dieses Bild in allen Viewportgrößen richtig darzustellen - ohne Beschnitt.
Außerdem ist das Bild weder für Google noch für Screenreader lesbar. Deine Seite hätte keinen Titel.
Du könntest jetzt den ausgeblendeten Sitenamen (h1) wieder einblenden und nach deinen Wünschen stylen.
Du könntest den Header-Hintergrund auf background: #85cff2; setzen.
Du könntest den blauen Kreis (Sticker: +55) als Bild neu in den Header setzen - oder auch als CSS-Element (rund).
Das wird eine mächtige Fummelei, weil hier nicht nur ein Stylesheet zu ändern wäre.
Ich möchte dich nicht entmutigen: Aber auch mit sehr guten CSS-Kenntnissen wird das alles sehr schwierig und aufwendig.
Ich tue mich immer sehr schwer mit solchen Tipps, aber in diesem Fall solltest du dich vielleicht doch lieber nach einem anderen Template umsehen.
Ich sehe voraus, dass es sehr lange dauern wird, bis du ein Ergebnis hast - und das wird vielleicht nichtmal deinen Wünschen entsprechen.