Support » Allgemeine Fragen » Bilder werden nicht responsive angezeigt, Videos schon

  • Gelöst themaart

    (@themaart)


    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
    TheMaart

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

Ansicht von 14 Antworten - 1 bis 14 (von insgesamt 14)
  • 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-Gerd

    Danke 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 geändert vor 3 Wochen, 3 Tage von themaart.

    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:

    Screenshot mobile Ansicht

    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 geändert vor 3 Wochen, 3 Tage von themaart.

    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.

    themaart

    (@themaart)

    @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! 🙂

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