Cover-Darstellung auf dem iPad nicht responsiv

(@frauinga)

Hallo Hans-Gerd,
danke für deine Mühe. Das wars leider nicht. Von dem Bild wird auf dem iPad immer noch ein verpixelter Ausschnitt gezeigt.

Ich habe mir das auf deinem Projekt auch noch mal angesehen. Dort sehen die Bilder prima aus, stehen aber fest. (sehr chick übrigens mit dem abgesofteten unteren Bereich). Damit könnte ich leben.

Schöne Grüße, Inga

Moderator

(@hage)

Hallo,
ich konnte den Code auf deiner Website allerdings in der developer console auch nicht entdecken
Teste das doch bitte noch mal mit dem folgenden Code, bei dem ich den Selektor geändert habe:

/* wegen Problem mit ios */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {
.wp-block-cover.alignfull.is-light.has-parallax{
  background-attachment: scroll;
}
}

Lasse aber bitte den Code dann unter zusätzliches CSS, damit ich das prüfen und ggfs. auch anpassen kann.

An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier. Hier noch ein Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum.

Viele Grüße
Hans-Gerd

Moderator

(@hage)

Nachtrag:

(sehr chick übrigens mit dem abgesofteten unteren Bereich).

Danke – freut mich, dass es dir gefällt. 😊

Thread-Starter

(@frauinga)

Hallo Hans-Gerd,

danke für den Code. Habe ich eingebaut in „zusätzliches CSS“ eingebaut. Sieht noch genauso doof aus, wie vorher.

Danke auch für den Hinweis, dass bei CSS-Problemen eigentlich nicht geholfen wird. (CSS steht schon lange auf meiner To-Learn-Liste). Ich halte dieses Phänomen nach wie vor für ein WP-Problem in punkto Responsivität.
Oder es liegt am iPad. Ich bin schon die ganze Zeit auf Fehlersuche außerhalb vom WP. Gerade habe ich gesehen, dass es ein neues Update gibt. Das installiere ich gerade. Vielleicht ist das die Fehlerquelle …

Schöne Grüße, Inga

Moderator

(@hage)

Hallo,

Ich halte dieses Phänomen nach wie vor für ein WP-Problem in punkto Responsivität.

nein, das ist offensichtlich ein allgemein bekanntes Problem, wie du z. B. hier siehst.

In dem folgenden Issue wird noch eine andere Alternative beschrieben, die ich allerdings noch testen muss.

Während der Entwicklung bzw. Fehlersuche solltest du kein Cache-Plugin aktiviert haben.
Kannst du das bitte prüfen.

Der Website-Bericht wäre hilfreich: Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.

Viele Grüße
Hans-Gerd

Thread-Starter

(@frauinga)

Hallo Hans-Gerd,

okay, es ist ein IOS-Problem. Sehe ich ein.

Caching-Plugin ist keins im Einsatz.

Hier der Website-Bericht

wp-core

version: 6.2.2
site_language: de_DE
user_language: de_DE
timezone: Europe/Berlin
permalink: /%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: undefined
environment_type: production
user_count: 2
dotorg_communication: true

wp-paths-sizes

wordpress_path: /www/htdocs/w0119ccf/welt.ingalandwehr.de
wordpress_size: 58,55 MB (61397394 bytes)
uploads_path: /www/htdocs/w0119ccf/welt.ingalandwehr.de/wp-content/uploads
uploads_size: 7,41 MB (7765066 bytes)
themes_path: /www/htdocs/w0119ccf/welt.ingalandwehr.de/wp-content/themes
themes_size: 22,89 MB (23998574 bytes)
plugins_path: /www/htdocs/w0119ccf/welt.ingalandwehr.de/wp-content/plugins
plugins_size: 69,12 MB (72480522 bytes)
database_size: 5,11 MB (5357768 bytes)
total_size: 163,08 MB (170999324 bytes)

wp-active-theme

name: Blocksy (blocksy)
version: 1.8.90
author: CreativeThemes
author_website: https://creativethemes.com
parent_theme: none
theme_features: core-block-patterns, block-templates, widgets-block-editor, automatic-feed-links, responsive-embeds, html5, title-tag, custom-logo, lifterlms-sidebars, boostify-header-footer, fl-theme-builder-headers, fl-theme-builder-footers, fl-theme-builder-parts, editor-styles, editor-style, editor-color-palette, editor-gradient-presets, post-thumbnails, menus, align-wide, customize-selective-refresh-widgets, header-footer-elementor, widgets
theme_path: /www/htdocs/w0119ccf/welt.ingalandwehr.de/wp-content/themes/blocksy
auto_update: Deaktiviert

wp-themes-inactive (2)

Twenty Twenty-One: version: 1.8, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert
Twenty Twenty-Two: version: 1.4, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert

wp-mu-plugins (1)

NinjaFirewall WP (mu-plugin): version: 1.0, author: The Ninja Technologies Network

wp-plugins-active (11)

Antispam Bee: version: 2.11.3, author: pluginkollektiv, Automatische Aktualisierungen deaktiviert
Blocksy Companion (Premium): version: 1.8.90, author: CreativeThemes, Automatische Aktualisierungen deaktiviert
Genesis Blocks: version: 2.0.0, author: StudioPress, Automatische Aktualisierungen deaktiviert
Koko Analytics: version: 1.0.38, author: ibericode, Automatische Aktualisierungen deaktiviert
NinjaFirewall (WP Edition): version: 4.5.8, author: The Ninja Technologies Network, Automatische Aktualisierungen deaktiviert
NinjaScanner: version: 3.0.12, author: The Ninja Technologies Network, Automatische Aktualisierungen deaktiviert
Regenerate Thumbnails: version: 3.1.5, author: Alex Mills (Viper007Bond), Automatische Aktualisierungen deaktiviert
SEOPress: version: 6.6.3, author: The SEO Guys at SEOPress, Automatische Aktualisierungen deaktiviert
Shariff Wrapper: version: 4.6.9, author: Jan-Peter Lambeck & 3UU, Automatische Aktualisierungen deaktiviert
UpdraftPlus - Backup/Restore: version: 1.23.4, author: UpdraftPlus.Com, DavidAnderson, Automatische Aktualisierungen deaktiviert
Yoast Duplicate Post: version: 4.5, author: Enrico Battocchi & Team Yoast, Automatische Aktualisierungen deaktiviert

wp-plugins-inactive (1)

WP Mail SMTP: version: 3.8.0, author: WP Mail SMTP, Automatische Aktualisierungen deaktiviert

wp-media

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1690
imagemagick_version: ImageMagick 6.9.10-23 Q16 x86_64 20190101 https://imagemagick.org
imagick_version: 3.5.0
file_uploads: File uploads is turned off
post_max_size: 200M
upload_max_filesize: 200M
max_effective_size: 200 MB
max_file_uploads: 20
imagick_limits:
imagick::RESOURCETYPE_AREA: 31 GB
imagick::RESOURCETYPE_DISK: 1.84467440737E+19
imagick::RESOURCETYPE_FILE: 786432
imagick::RESOURCETYPE_MAP: 31 GB
imagick::RESOURCETYPE_MEMORY: 16 GB
imagick::RESOURCETYPE_THREAD: 1
imagick::RESOURCETYPE_TIME: 1.84467440737E+19
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, ART, ARW, AVI, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DJVU, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, H, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JBG, JBIG, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
gd_version: 2.2.5
gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
ghostscript_version: 9.50

wp-server

server_architecture: Linux 5.4.0-149-generic x86_64
httpd_software: Apache
php_version: 8.0.28 64bit
php_sapi: fpm-fcgi
max_input_variables: 10000
time_limit: 30
memory_limit: 256M
max_input_time: 60
upload_max_filesize: 200M
php_post_max_size: 200M
curl_version: 7.68.0 OpenSSL/1.1.1f
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: false

wp-database

extension: mysqli
server_version: 10.5.19-MariaDB-1:10.5.19+maria~ubu2004-log
client_version: mysqlnd 8.0.28
max_allowed_packet: 67108864
max_connections: 500

wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /www/htdocs/w0119ccf/welt.ingalandwehr.de/wp-content
WP_PLUGIN_DIR: /www/htdocs/w0119ccf/welt.ingalandwehr.de/wp-content/plugins
WP_MEMORY_LIMIT: 256M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: Nicht definiert
DB_CHARSET: utf8
DB_COLLATE: undefined

wp-filesystem

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
mu-plugins: writable

Es ist toll, dass du auch immer eine genau Beschreibung mitlieferst, wie ich etwas machen muss. Doch das brauchst du nicht. Ich kenne mich gut mit WordPress aus, kann nur kein CSS.

Viele Grüße, Inga

Moderator

(@hage)

Hallo,
der Website-Bericht ist so weit unauffällig. Den von mir angegebenen CSS-Code kann ich allerdings nicht unter „Zusätzliches CSS“ entdecken. Kannst du bitte noch mal prüfen, ob das unter „Zusätzliches CSS“ steht.

Es ist toll, dass du auch immer eine genau Beschreibung mitlieferst, wie ich etwas machen muss. Doch das brauchst du nicht. Ich kenne mich gut mit WordPress aus, kann nur kein CSS.

Das machen wir hier im Forum in der Regel auch, damit ggfs. Mitleser, die sich vielleicht nicht so gut auskennen, das nachvollziehen können.

Viele Grüße
Hans-Gerd

Moderator

(@hage)

Nachtrag: Sorry, ich hatte den Code übersehen. Ist drin.

Thread-Starter

(@frauinga)

Na, da bin ich aber beruhigt, dass du den Code gefunden hast.

Moderator

(@hage)

hmm, dann wird es erst mal schwierig, weil ich unter Windows entwickle und das Problem hier nur bedingt analysieren kann. 🤷‍♂️
Vielleicht hat ja noch jemand hier eine andere Idee oder du musst mal in einem der oben angegebenen Foren nachfragen.

Über eine Rückmeldung freuen wir uns.

Thread-Starter

(@frauinga)

Ich arbeit auch unter Windows, habe aber zusätzlich ein iPad.

Ich wäre ja zufrieden, wenn das Bild auf dem iPad feststehen würde und nicht verpixelt wäre.

Die Seite wird erst in ein paar Wochen online gehen. Ich habe also noch viel Zeit, mich damit zu beschäftigen 😉

Moderator

(@hage)

ok, noch ein Versuch:

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {
.wp-block-cover__image-background.wp-image-1160.has-parallax{
  background-attachment: scroll;
}
}

Thread-Starter

(@frauinga)

Mit dieser Antwort scheint heute Abend bei Dunkelheit noch die Sonne 🙂

Danke, Hand-Gerd. Das passt. Sieht auf dem iPad im Hoch- und Queerformat gut aus, steht aber fest.

Danke dir sehr. Einen schönen Abend noch.

Viele Grüße, Inga

Moderator

(@hage)