Titelbild wird abgeschnitten bei Mobilgerät

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Eliquas
Posts: 149
Joined: Mon Dec 13, 2010 10:23 am

Titelbild wird abgeschnitten bei Mobilgerät

Post by Eliquas » Sun Dec 10, 2017 4:38 pm

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
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

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Titelbild wird abgeschnitten bei Mobilgerät

Post by Tata » Sun Dec 10, 2017 4:50 pm

Eliquas wrote:Nur auf dem Smartphone wird nur der mitttlere Teil des Bildes gezeigt. Rechts und Links wird es abgeschnitten.
Hast Du es schon mit @mediaquerry versucht? Oder noch besser mit z.B.

Code: Select all

.title img{
width: 100%;
height: auto;
max-height: <wasimmer passt>;
}
Und man brauchst Du noch ins template.htm

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.

Eliquas
Posts: 149
Joined: Mon Dec 13, 2010 10:23 am

Re: Titelbild wird abgeschnitten bei Mobilgerät

Post by Eliquas » Sun Dec 10, 2017 5:18 pm

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;
}
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

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Titelbild wird abgeschnitten bei Mobilgerät

Post by lck » Sun Dec 10, 2017 9:42 pm

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;
}
Aber irgendwann wird das Bild seitlich beschnitten (bei kleinem Viewport), da der Seitentitel und Slogan eine gewisse Höhe beansprucht.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Eliquas
Posts: 149
Joined: Mon Dec 13, 2010 10:23 am

Re: Titelbild wird abgeschnitten bei Mobilgerät

Post by Eliquas » Mon Dec 11, 2017 5:05 am

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

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Titelbild wird abgeschnitten bei Mobilgerät

Post by lck » Mon Dec 11, 2017 10:08 am

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

Eliquas
Posts: 149
Joined: Mon Dec 13, 2010 10:23 am

Re: Titelbild wird abgeschnitten bei Mobilgerät

Post by Eliquas » Mon Dec 11, 2017 3:45 pm

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?
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

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Titelbild wird abgeschnitten bei Mobilgerät

Post by frase » Mon Dec 11, 2017 5:50 pm

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:

Code: Select all

.custom-responsive .art-header {
    background-image: url('images/header.jpg');
    background-position: center;
    background-size: cover;
}
und in Zeile 463:

Code: Select all

.art-header {
   ...
    height: 120px;
    ...
}
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.

Eliquas
Posts: 149
Joined: Mon Dec 13, 2010 10:23 am

Re: Titelbild wird abgeschnitten bei Mobilgerät

Post by Eliquas » Tue Dec 12, 2017 6:47 am

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

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Titelbild wird abgeschnitten bei Mobilgerät

Post by frase » Tue Dec 12, 2017 7:19 am

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.

Post Reply