Responsivness meiner Seite

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

Zitat von Persephone

Hallo @mteepee ,

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

oooohhh, was genau muss ich da machen?

Zitat von Persephone

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.

aber durch ein Cache Plugin wird die Seite doch nicht responsive?

Zitat von SuMu

In der Regel sind moderne Themes responsive, wenn nicht, würde ich mir ein solches installieren.
Danach ggf. ein Cache-Plugin etc.

ich weiss, ich will aber genau das. Hmmm.

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;

}
}

Zitat von SEpp55

Mein Vorschlag, ausser dem Hintergrundbild ;)

CSS

.wp-block-cover__inner-container h1, h2 {
    text-indent: 0;
    padding-left: 10%;
    }


@media (max-width: 550px) {
.wp-block-cover__inner-container h1, h2 {
    text-indent: 0;
    padding-left: 0;
    }
    h1 span {
    font-size: 70px !important;
    }
    h2 span {
    font-size: 30px !important;
    }
}


@media (max-width: 400px) {
.site-branding .site-title {
    font-size: 1.5rem !important;
    }
}


@media (max-width: 767px) {
.entry-content {
    padding-left:0;
    padding-right:0;
    }
}

Alles anzeigen

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!

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

Zitat von SEpp55

Aaaah, sehe ich erst jetzt, der Graufilter wird über den Content gelegt, habe ich zuvor nicht beachtet ;)

Genau. habe jetzt meinen CSS Code auskommentiert und den Cache geleert... Jetzt liegt der Graufilter wieder über dem Content...
Hmmm

Zitat von SEpp55

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

hab ich gestern schon stundenlang gemacht...