Support » Allgemeine Fragen » Bildbreite einstellen

  • Gelöst karin2301

    (@karin2301)


    Hallo,

    ich habe die WP-Seite einer Freundin übernommen. Die Seite wurde mit dem Theme „Calmer“ erstellt. Nun möchte ich etwas breitere Bilder einfügen. Da ich html und CSS kann habe ich per Custom CSS schon bisschen rumgeschraubt.
    Die Bildhöhe meiner Bilder kann ich einstellen aber über die Breite des Inhaltstextes komme ich nicht hinaus. Ich habe alle margins und paddings drumrum rausgemacht und ich finde er sollte meinen Bildern wenigstens die Breite des #root-container -> width: 1250px; geben, damit wäre ich schon zufrieden, aber er gibt mir nur 690px.

    Folgendes steht in meinem html:
    <img src="https://nina-breinbauer.de/wp-content/uploads/integrales-coaching1.jpg" width="1250px" height="100%" />

    Das ist mein CSS dazu:

    img#coaching {
    width: 1250px !important;
    height: 100%;
    }

    Das hier ist der Link zu meiner Vorschauseite:
    https://nina-breinbauer.de/integrales-coaching-t/?preview_id=598&preview_nonce=b4a2e40b7e&preview=true

    Warum nimmt er die 1250px nicht als Bildbreite?
    Wär klasse wenn ihr mir mit meinem Problem helfen könntet.

    • Dieses Thema wurde geändert vor 6 Tagen, 10 Stunden von  Bego Mario Garde. Grund: Codeformatierung hinzugefügt

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)
  • Der Link hilft uns nicht weiter, denn dann kommt:

    Du bist leider nicht berechtigt, Entwürfe anzusehen.

    @bscu Der Link funktioniert für uns nicht, aber kannst dir die Seite unter https://nina-breinbauer.de/integrales-coaching-t/ anschauen.

    @karin2301 Für Bilder gibt es aber auch eine CSS-Regel img { max-width: 100%; } aus wp-content/themes/Calmer/css/foundation.css, Zeile 72.

    Setzt du

    img#coaching {
    width: 1250px !important;
    height: 100%;
    max-width: none;
    }

    wird das Bild größer dargestellt, hängt dann aber wegen der CSS-Regeln der übergeordneten <div>-Abschnitte etwas „in den Seilen“ – hier musst du also weitere Anpassungen vornehmen.

    !important solltest du nach Möglichkeit vermeiden.

    Grundsätzlich bist du mit CSS-Fragen hier nicht ideal aufgehoben – dafür gibt es passendere Foren. Eine gute Einführung in CSS findest du hier.

    Danke für Eure schnellen Antworten!
    img { max-width: 100%; }
    stand genau wie Du sagtest in der Zeite 72 in der foundation.css
    Ich hab das in mein Custom CSS geschrieben:
    img#coaching {
    width: 1250px !important;
    height: 100%;
    max-width: none;
    }

    Leider hat mir das nicht wirklich geholfen; er hat das Bild schön vergrößert, aber setzt mir den linken Teilausschnitt in genau dieselbe Breite. Etwas höher ist das Bild jetzt aber mein Problem mit der Breite bleibt dasselbe.

    Das mit dem Link ist lieb gemeint @ Begio Mario aber ich kann doch CSS, bin nur nicht upgedatet. Ich kann mir die Komplettanleitungen in den Ferien mal anschauen, hab jetzt leider keine Zeit.

    Oder kannst Du mir ein geeigneteres Forum für mein Problem nennen ?
    Wenn ich nicht in WordPress wäre hätte ich das Problem ziemlich sicher nicht, deswegen bin ich hier.

    Ich hab doch alle übergeordneten paddings und margins rausgemacht… wonach kann ich noch suchen, was kann mein Bild noch daran hindern breiter zu werden?
    Mein Codeinspektor in Chrome zeigt mir nichts übergeordnetes an, was das noch Bild beschränken könnte, deswegen verstehe ich es einfach nicht.
    Kann mir irgendjemand im Codeinspektor mal kurz reinschauen und sagen wonach ich nicht geschaut habe, gibt es einen neuen CSS – Befehl, den ich vielleicht nicht kenne? Oder hat sonst jemand eine Idee? Ich wäre Euch soo dankbar…

    Hier nochmal der Link:
    https://nina-breinbauer.de/integrales-coaching-t/

    .blog-item.center-layout .blog-info, .blog-item.center-layout-js .blog-info, #blog-wrapper .blog-single-content .center-layout .blog-info, #blog-wrapper .blog-single-content .center-layout-js .blog-info, #page-content.center-layout .page-info, #page-content.center-layout-js .page-info {
        display: block;
        margin: auto;
        padding-top: 0;
        padding-right: 0;
        text-align: center;
        vertical-align: top;
        width: 690px; <- hier musst du die Breite noch anpassen!
    }

    an letzer Stelle steht das Problem! Hier musst du noch die Breite des Bildes anpassen. Also 1290 anstat der 690. Dann sollte es funktionieren.

    • Diese Antwort wurde geändert vor 5 Tagen, 3 Stunden von  saffi1974.

    Ich habe den Status des Thread jetzt auf „kein Support-Thema“ geändert, weil es offensichtlich nicht um ein WordPress-Problem geht, sondern um eine Änderung eines Stylesheet. Dass du dazu in unserem Forum nicht ideal aufgehoben bist, habe ich bereits geschrieben; deshalb verstehe ich auch jetzt die Nachfrage nicht.

    Wenn ich nicht in WordPress wäre hätte ich das Problem ziemlich sicher nicht, deswegen bin ich hier.

    Du bekommst WordPress, Themes und Plugins kostenlos zur Verfügung gestellt und kannst sie nach Belieben untersuchen und an deine Wünsche anpassen. Das setzt aber Kenntnisse in PHP, HTML, CSS und JavaScript voraus, die wir hier nicht vermitteln können – auch nicht, wenn du WordPress verwendest.

    Umfangreichere Änderungen an einem Stylesheet sprengen außerdem auch den Rahmen eines Support durch freiwillige HelferInnen. Deine ursprüngliche Frage, wieso Änderungen der Bildbreite nicht übernommen werden, habe ich bereits ausführlich beantwortet.

    @saffi1974 Die Lösung ist nicht optimal, weil sie nicht responsive ist. Der Wert müsste in Prozent angegeben und max-width für das Bild dann auf 100% gesetzt werden.

    Ja sicher. Hatte mehr darauf hingewiesen das da das Problem zufinden ist. Den Code im Einzelnen nun zu durchforsten, war mir der Zeitaufwand zu groß.^^

    @saffi1974 Ja, das meinte ich mit „… sprengen außerdem auch den Rahmen eines Support durch freiwillige HelferInnen“.

    Ich möchte niemandem böse Absichten unterstellen, aber nach meine Erfahrung ist es häufig so, dass du auf einen Fehler in einer CSS-Regel hinweist und durch die Änderung anschließend drei neue Probleme entstehen. Wenn du dich dann wegen deiner ersten Antwort verpflichtet fühlst, weiter zu helfen und noch ein bisschen emotionaler Druck aufgebaut wird („Ich wäre Euch soo dankbar…“), verbringst du unter Umständen drei Stunden unbezahlt mit einem sehr individuellen Problem. Krönender Abschluss ist dann anschließend (!) „ich habe es jetzt ganz anders gelöst“.

    Trotzdem Danke für deinen Beitrag.

    Vielen Dank @saffi1974
    Für mich ist das Problem damit gelöst.
    Für Handy+Tablet muss ich noch individuell bisschen was anpassen aber das sollte ich hinbekommen… danke für den Hinweis mit max-width: 100%;

    Mir waren nur die Hände gebunden weil ich auf den Bereich keinen Zugriff hatte… bin jetzt ganz happy, super:-))

    Na, dann markieren wir den Thread doch einfach als „gelöst“. Denn …

    Wenn’s richtig läuft, du hast’s kapiert,
    werden Themen als „gelöst“ markiert,
    damit auch alle in der Runde wissen,
    dass sie hier nicht mehr helfen müssen.
    🌻

    Ok, nächstes Mal weiss ichs 👍

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)