Bilder werden nicht responsive angezeigt, Videos schon
-
Hallo!
Obwohl das Theme es eigentlich können sollte, werden Bilder und wurden eingebettete YouTube-Videos in den Beiträgen nicht auf allen Bildschirmgrößen schön angezeigt. Am Smartphone stehen die Bilder an der rechten Seite über.
Mit dem CSS-Schnipsel
embed, iframe, img, object, video { max-width: 100%; }
habe ich bereits bei den Videos Abhilfe schaffen können und wunderte mich, dass nicht auch die Bilder nun passend angezeigt werden – obwohl deren Breite doch auch definiert wird?Die Bilder in Beiträgen habe ich auf eine Höhe von 400 Pixeln gesetzt, damit es etwas einheitlicher aussieht.
Habt ihr eine Idee, wo das Problem liegen könnte und wie ich es beheben kann?
Viele Grüße und vielen Dank
TheMaartDie Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
Hallo,
du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website und kannst den Bericht über den Button „Bericht in die Zwischenablage kopieren“ und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
Da unklar ist, ob es sich um ein gekauftes Theme handelt, hier schon mal der Hinweis: Wir können dir bei gekauften Themes oder Plugins so gut wie gar nicht helfen, weil sie uns nicht zur Verfügung stehen. Wir müssten sonst bei jeder Frage erst einmal das passende Theme oder Plugin kaufen, uns dort einarbeiten und dann kostenlos den Support anbieten, für den du beim Kauf eigentlich bezahlt hast. Du solltest dich in dem Fall an den Entwickler wenden. Lies bitte auch mal in der FAQ (B 5.) zu diesem Thema.
Viele Grüße
Hans-GerdDanke für die schnelle erste Antwort @hage! Das FAQ habe ich natürlich bereits gelesen – eine Angabe zu A5 habe ich für nicht notwendig erachtet, weil es ja quasi auf jeder Beitragsseite der Fall ist, aber als Ergänzung hier eine Beispielseite, bei der die Einbindung von YouTube-Videos gefixt ist, die der Bilder aber nicht.
Das Theme ist das völlig kostenlose und hier bei WordPress.org verfügbare Wishful Blog.
Hier der Bericht (mit gekürzten Datei-Pfaden):
### wp-core ### version: 5.4.2 site_language: de_DE user_language: de_DE timezone: Europe/Berlin permalink: /%postname%/ https_status: true user_registration: 0 default_comment_status: closed multisite: false user_count: 2 dotorg_communication: true ### wp-paths-sizes ### wordpress_path: /pop-himmel.de wordpress_size: 63,47 MB (66552808 bytes) uploads_path: /pop-himmel.de/wp-content/uploads uploads_size: 11,28 MB (11824622 bytes) themes_path: /pop-himmel.de/wp-content/themes themes_size: 10,42 MB (10924448 bytes) plugins_path: /pop-himmel.de/wp-content/plugins plugins_size: 68,27 MB (71583885 bytes) database_size: 3,64 MB (3817472 bytes) total_size: 157,07 MB (164703235 bytes) ### wp-dropins (1) ### maintenance.php: true ### wp-active-theme ### name: Wishful Blog (wishful-blog) version: 1.0.8 author: wishfulthemes author_website: https://wishfulthemes.com/ parent_theme: none theme_features: automatic-feed-links, title-tag, post-thumbnails, menus, html5, custom-background, customize-selective-refresh-widgets, custom-logo, editor-style, align-wide, wp-block-styles, responsive-embeds, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, custom-header, widgets theme_path: /pop-himmel.de/wp-content/themes/wishful-blog ### wp-themes-inactive (1) ### Vilva: version: 1.0.5, author: Blossom Themes ### wp-plugins-active (11) ### AddToAny Share Buttons: version: 1.7.41, author: AddToAny Autoptimize: version: 2.7.3, author: Frank Goossens (futtta) Classic Editor: version: 1.5, author: WordPress Contributors Complianz | GDPR/CCPA Cookie Consent: version: 4.6.9, author: Really Simple Plugins Compress JPEG & PNG images: version: 3.2.1, author: TinyPNG Google Analytics for WordPress by MonsterInsights: version: 7.11.0, author: MonsterInsights Regenerate Thumbnails: version: 3.1.3, author: Alex Mills (Viper007Bond) Site Kit by Google: version: 1.12.0, author: Google UpdraftPlus - Backup/Restore: version: 1.16.26, author: UpdraftPlus.Com, DavidAnderson WP Featherlight: version: 1.3.3, author: Cipher Yoast SEO: version: 14.5, author: Team Yoast ### wp-media ### image_editor: WP_Image_Editor_Imagick imagick_module_version: 1690 imagemagick_version: ImageMagick 6.9.10-68 Q16 x86_64 2020-04-01 https://imagemagick.org imagick_limits: imagick::RESOURCETYPE_AREA: 62 GB imagick::RESOURCETYPE_DISK: 9.2233720368548E+18 imagick::RESOURCETYPE_FILE: 6144 imagick::RESOURCETYPE_MAP: 62 GB imagick::RESOURCETYPE_MEMORY: 31 GB imagick::RESOURCETYPE_THREAD: 8 gd_version: bundled (2.1.0 compatible) ghostscript_version: 9.25 ### wp-server ### server_architecture: Linux 3.10.0-1062.12.1.el7.x86_64 x86_64 httpd_software: Apache php_version: 7.4.8 64bit php_sapi: fpm-fcgi max_input_variables: 1000 time_limit: 30 memory_limit: 256M max_input_time: 60 upload_max_size: 2M php_post_max_size: 8M curl_version: 7.29.0 NSS/3.44 suhosin: false imagick_availability: true htaccess_extra_rules: false ### wp-database ### extension: mysqli server_version: 10.3.23-MariaDB client_version: mysqlnd 7.4.8 ### wp-constants ### WP_HOME: undefined WP_SITEURL: undefined WP_CONTENT_DIR: /pop-himmel.de/wp-content WP_PLUGIN_DIR: /pop-himmel.de/wp-content/plugins 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_LOCAL_DEV: undefined DB_CHARSET: utf8 DB_COLLATE: undefined ### wp-filesystem ### wordpress: writable wp-content: writable uploads: writable plugins: writable themes: writable
Viele Grüße!
-
Diese Antwort wurde vor 4 Jahren, 6 Monaten von
themaart geändert.
embed, iframe, img, object, video, figure {
max-width: 100%;
}Danke, @pixolin. Macht aber leider keinen Unterschied!
Browser-Cache geleert? Bei mir wird’s im Browser damit richtig angezeigt!!elf!
Es geht um die „mobile“ Version der Website, also die Ansicht auf (sehr) kleinen Bildschirmen wie Smartphones. Am PC sieht die Seite bei mir auch richtig aus. Nur mobil oder mit einem kleinen Browser-Fenster wird es wiederum nicht richtig angezeigt.
Habe das CSS auch über den Customizer hinzugefügt. Dort wird z. B. die Einbettung des YouTube-Videos direkt umgesetzt und richtig angezeigt, ohne den Cache zu löschen.
Probehalber habe auch den Cache gelöscht, hat leider nichts gebracht.
Die Seite https://www.pop-himmel.de/claeng-reise-ep/ wird bei mir auf dem Smartphone so angezeigt wie hier im Screenshot:
Das die Schrift angeschnitten wird, ist im Originalbild festgelegt.
Stimmt, da passt es. Bei der Seite https://www.pop-himmel.de/nena-licht-offizielles-video-live-shows/ wird es noch nicht richtig angezeigt, das ist eine der (wenigen) Stellen, an denen ein querformatiges Bild gesetzt ist.
Aber immerhin schon ein kleiner Fortschritt (wobei – macht es Sinn, dass es in Beitrag A funktioniert und in Beitrag B nicht? Gilt das im Customizer eingefügte CSS nicht für alles?)!
Ich weiß, kann nicht sein … wird aber bei mir im Browser auch richtig angezeigt.
¯\_(ツ)_/¯
Okay. Vielen Dank für eure Hilfe! 🙂
-
Diese Antwort wurde vor 4 Jahren, 6 Monaten von
themaart geändert.
Hast du jetzt wegen mir aufgegeben oder bist du mit der Lösung einverstanden? 🙂
Bei dir scheint es ja zu funktionieren, weshalb ich davon ausgehe, dass der Fehler nicht bei der Website, sondern bei mir liegt.
Vorausgesetzt, du hast nicht noch einen Lösungsansatz, gebe ich mich geschlagen! 🤔Vielen Dank fürs Nachfragen! 🙂
Wie gesagt: nach meinen Tests im Browser auf dem Laptop und Smartphone sieht damit soweit alles fehlerfrei aus. Ich wollte dich da aber in keiner Weise bevormunden und die Kommentare waren nur ein wenig scherzhaft formuliert.
@pixolin Kein Problem, das habe ich so auch verstanden! 🙂
Für alle, die auch dieses Problem haben und zufällig auf diesen Thread gestoßen sind:
Ich habe nun durch einen Geistesblitz des Fehlers Lösung gefunden (bei mir und auf anderen Geräten sah es immer noch nicht „richtig“ aus):Nachdem die ersten beiden Beiträge testweise veröffentlicht wurden (u. a. auch der angesprochene Nena-Beitrag), habe ich vom Block-Editor zum Classic Editor gewechselt, weil ein Freund damit besser zurecht kommt. Im Code waren überall noch die Block-Editor-Tags und ausschlaggebend für das Problem, dass die Bilder zu groß für den Bildschirm angezeigt wurden, waren die die Bilder umfassenden HTML-Tags
<figure class="wp-block-image size-large"> </figure>
. Nachdem ich diese entfernt habe, wurden die Bilder auch auf kleinen Bildschirmen richtig skaliert! 🙂 -
Diese Antwort wurde vor 4 Jahren, 6 Monaten von
- Das Thema „Bilder werden nicht responsive angezeigt, Videos schon“ ist für neue Antworten geschlossen.