1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 5.4 Responsivness meiner Seite

Dieses Thema im Forum "Design" wurde erstellt von mteepee, 23. November 2020.

Schlagworte:
  1. mteepee

    mteepee Well-Known Member

    Registriert seit:
    23. Januar 2012
    Beiträge:
    300
    Zustimmungen:
    0
    Hallo zusammen,

    bei meiner Seite passt sich das Headerbild nicht responsiv auf einem Handy oder Tablet an. Das sieht einfach nicht gut aus.

    Kann mir vielleicht jemand helfen, wie ich das hinbekomme? Ich weiß, dass die Media Querries einbauen kann als zusätzliches CSS, aber ich weiss den Code nicht.
    Kann mir bitte jemand helfen?
    Hier gehts zur Seite: https://sweetlifecoach.de/
    Danke
     
  2. Persephone

    Persephone Well-Known Member

    Registriert seit:
    21. Februar 2016
    Beiträge:
    321
    Zustimmungen:
    4
    Hallo @mteepee ,

    deine Website ist noch nicht optimiert, siehe Cache, CSS u. Java-Scipt inline anwenden.
     
  3. mteepee

    mteepee Well-Known Member

    Registriert seit:
    23. Januar 2012
    Beiträge:
    300
    Zustimmungen:
    0

    oooohhh, was genau muss ich da machen?
     
  4. Persephone

    Persephone Well-Known Member

    Registriert seit:
    21. Februar 2016
    Beiträge:
    321
    Zustimmungen:
    4
    Da gibt verschiedenen Möglichkeiten: Cache Plugin installieren. Ich habe mich jedoch für diese Variante entschieden: Plugin Autoptimize und einen entsprechenden Eintrag in der htaccess Datei. Die Einstellung war allerdings etwas knifflig.
     
  5. mteepee

    mteepee Well-Known Member

    Registriert seit:
    23. Januar 2012
    Beiträge:
    300
    Zustimmungen:
    0
    aber durch ein Cache Plugin wird die Seite doch nicht responsive?
     
  6. SuMu

    SuMu Well-Known Member

    Registriert seit:
    5. Januar 2006
    Beiträge:
    6.116
    Zustimmungen:
    29
    In der Regel sind moderne Themes responsive, wenn nicht, würde ich mir ein solches installieren.
    Danach ggf. ein Cache-Plugin etc.
     
  7. mteepee

    mteepee Well-Known Member

    Registriert seit:
    23. Januar 2012
    Beiträge:
    300
    Zustimmungen:
    0
    ich weiss, ich will aber genau das. Hmmm.
     
  8. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    8.150
    Zustimmungen:
    877
    Inwiefern wird das Headerbild dadurch responsive?
    Es läuft bereits ein Cache-Plugin, Cache Enabler.

    Deaktivere das Cache-Plugin mal, besteht das Problem mit dem Headerbild dann weiter?

    Ein Ansprechpartner hier wäre auch der Theme Support, es scheint sich um ein relativ neues Theme zu handeln, evtl. funktioniert es noch nicht richtig.
     
  9. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.427
    Zustimmungen:
    376
    Ich sehe hier ja einige Unschönheiten, das ist aber meie persönliche Meinung;)

    • Das Hintergrundbild ist von Full-Width bis 830px Breite responsive, unter dieser Breite NICHT
    • Die Überschriften sind mit font-size 100px bzw 50px festgelegt, ob das optimal ist .....
    • diese Überschriften sind mit einem text-indent: 100px; (linker Abstand) ausgestattet, sobald die untere Zeile umbricht verliert sie die Formatierung, ich würde das ggf.mit einem padding:10% für den gesamten Bereich lösen.
    • der Name wird unter ca.650px nicht mehr schön angezeigt, der linke Rand wird "zu schmal" - für mich nicht stimmig mit dem rechten Rand
    • unter 768px Breite wird links und rechts ein padding mit 1rem wirksam - wem es gefällt ;)
    Das Hintergrundbild ist noch mit http eingebunden NICHT mit https!!!
     
  10. mteepee

    mteepee Well-Known Member

    Registriert seit:
    23. Januar 2012
    Beiträge:
    300
    Zustimmungen:
    0
    Jugend forscht
    Ich habe jetzt zusätzlichen CSS Code mit reingepackt. Ein bisschen ists besser aber so ganz funktioniert es nicht.
    Kann mir jemand auf dieser Basis weiterhelfen?
    DAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANKE.


    @Media only screen
    and (device-width : 375px)
    and (device-height : 667px)
    and (-webkit-device-pixel-ratio : 2)
    {
    .wp-block-cover, .wp-block-cover-image, .site-branding .site-title

    {
    background-size: cover !important;
    position: static !important;
    min-height: 15% !important;
    font-size: 1.275rem;

    }
    }
     
  11. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.427
    Zustimmungen:
    376
    Mein Vorschlag, ausser dem Hintergrundbild ;)

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  12. mteepee

    mteepee Well-Known Member

    Registriert seit:
    23. Januar 2012
    Beiträge:
    300
    Zustimmungen:
    0
    Aber ganz grandios! Superdupergut! Wirklich toll. Ich habe nun das noch drunter gepackt und siehe da: Funzt!
    @Media (max-width: 767px) {
    .wp-block-cover, .wp-block-cover-image {
    background-size: cover !important;
    position: static !important;
    min-height: 100% !important;
    }
    }

    @Media (max-width: 767px) {
    .hentry .entry-content .wp-block-cover .wp-block-cover__inner-container {
    padding-top: 50% !important;
    }
    }

    Dankeschön vielmals!
     
  13. mteepee

    mteepee Well-Known Member

    Registriert seit:
    23. Januar 2012
    Beiträge:
    300
    Zustimmungen:
    0
    Hallo nochmals,

    jetzt muss ich mich doch nochmals melden. Und zwar habe ich auf der Desktop Version einen Graufilter über dem Hero-Bild - kann man so im Theme einstellen. Dunkelt das Bild etwas ab. Auf der mobilen hatte ich das auch, aber auch über dem Text, also nicht nur über dem Bild. Dann habe ich gestern mit dem folgenden Code Schnipsel rumexperimentiert, es aber leider nicht hinbekommen. Ich glaube, die Klasse hab ich gefunden, aber das mit der grauen Abdeckung auf dem Bild hat nicht ganz funktioniert. Was mache ich falsch?

    @Media (max-width: 767px) {
    .wp-block-cover-image.has-background-dim:not(.has-background-gradient):before, .wp-block-cover-image .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim:not(.has-background-gradient):before, .wp-block-cover .wp-block-cover__gradient-background {
    opacity: .4 !important;
    position: inherit !important;
    }
    }
     
  14. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.427
    Zustimmungen:
    376
    Also ich sehe, das die Desktop-Version eigentlich global wirkt. Die ist nicht nur für die Desktop Darstellung. Wenn ich --deine o.g. CSS-Anweisung die temporär deaktiviere ist das Hintergrunfbild mit opacity: .4; mit dem gewünschten Graufilter ausgestattet. Der Text ist, so viel ich sehen kann, NICHT betroffen!
     
  15. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.427
    Zustimmungen:
    376
    Aaaah, sehe ich erst jetzt, der Graufilter wird über den Content gelegt, habe ich zuvor nicht beachtet ;)
     
    mteepee gefällt das.
  16. mteepee

    mteepee Well-Known Member

    Registriert seit:
    23. Januar 2012
    Beiträge:
    300
    Zustimmungen:
    0
    Genau. habe jetzt meinen CSS Code auskommentiert und den Cache geleert... Jetzt liegt der Graufilter wieder über dem Content...
    Hmmm
     
  17. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.427
    Zustimmungen:
    376
    Ich habe zuvor NUR die Überschriften beachtet .....

    Um das herauszufinden, lösche alle Zusätzlichen CSS Anweisungen! (kopiere die in ein Sheet von Notepad++!)
    Danach kopiere die Anweisungen Blockweise wieder in die Zusätzlichen CSS, dann siehst du wodurch das ausgelöst wird ;)
     
  18. mteepee

    mteepee Well-Known Member

    Registriert seit:
    23. Januar 2012
    Beiträge:
    300
    Zustimmungen:
    0
    hab ich gestern schon stundenlang gemacht...
     
  19. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    2.427
    Zustimmungen:
    376
    Deaktiviere nachfolgenden CSS-Block

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  20. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    8.150
    Zustimmungen:
    877
    Oder zumindest die position dort...
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden