Support » Allgemeine Fragen » Gutenberg ist nicht responsive

  • Gelöst aatmaberlin

    (@aatmaberlin)


    Hallo zusammen,

    ich habe meine Seite mit Divi aufgebaut, nutze jedoch den Gutenberg Editor für meine Blogbeiträge. Ich habe wiederholt mit dem Divi Support gesprochen und diese haben mir versichert, dass es ein „WordPress Problem“ sei – und nicht eins des Themes. Folgendes: Meine Blogbeiträge sehen auf dem Desktop super aus, aber sobald man sie sich mobil anschaut, sind die Überschriften H1, H2 viel zu groß und die Seite ist nicht mehr responsive. Ich habe über die Suchfunktion versucht, etwas rauszufinden – leider erfolglos. Habt ihr Tipps, wie ich dies umstellen kann? Vielen Dank schon mal für eure Hilfe. Falls euch bei der Inspektion noch etwas einfällt, das aktuell nicht rund läuft auf meiner Seite – ich bin für jeden Tipp dankbar 🙂 Ich habe mir das alles selbst beigebracht und stehe immernoch recht am Anfang.

    Hier noch mein Bericht:

    wp-core
    
    version: 6.1.1
    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: open
    environment_type: production
    user_count: 2
    dotorg_communication: true wp-paths-sizes wordpress_path: /home/www/wordpress
    wordpress_size: 56,03 MB (58756884 bytes)
    uploads_path: /home/www/wordpress/wp-content/uploads
    uploads_size: 143,55 MB (150518785 bytes)
    themes_path: /home/www/wordpress/wp-content/themes
    themes_size: 56,62 MB (59370406 bytes)
    plugins_path: /home/www/wordpress/wp-content/plugins
    plugins_size: 56,07 MB (58793340 bytes)
    database_size: 17,02 MB (17842176 bytes)
    total_size: 329,29 MB (345281591 bytes) wp-active-theme name: Divi (Divi)
    version: 4.20.2
    author: Elegant Themes
    author_website: http://www.elegantthemes.com
    parent_theme: none
    theme_features: core-block-patterns, block-templates, widgets-block-editor, custom-background, automatic-feed-links, post-thumbnails, menus, title-tag, post-formats, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, customize-selective-refresh-widgets, wp-block-styles, editor-style, widgets
    theme_path: /home/www/wordpress/wp-content/themes/Divi
    auto_update: Deaktiviert wp-themes-inactive (1) Twenty Twenty-Three: version: 1.0, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert wp-plugins-active (10) Akismet Anti-Spam: version: 5.1, author: Automattic, Automatische Aktualisierungen aktiviert
    Borlabs Cookie - Cookie Opt-in: version: 2.2.62, author: Borlabs GmbH, Automatische Aktualisierungen aktiviert
    Code Snippets: version: 3.3.0, author: Code Snippets Pro, Automatische Aktualisierungen aktiviert
    Lazy Load - Optimize Images: version: 2.3.6, author: WP Rocket, Automatische Aktualisierungen deaktiviert
    Loco Translate: version: 2.6.4, author: Tim Whitlock, Automatische Aktualisierungen deaktiviert
    Polylang: version: 3.3.2, author: WP SYNTEX, Automatische Aktualisierungen aktiviert
    Site Kit by Google: version: 1.96.0, author: Google, Automatische Aktualisierungen aktiviert
    WP Recipe Maker: version: 8.7.5, author: Bootstrapped Ventures, Automatische Aktualisierungen aktiviert
    WP Recipe Maker Premium: version: 8.6.0, author: Bootstrapped Ventures, Automatische Aktualisierungen aktiviert
    Yoast Duplicate Post: version: 4.5, author: Enrico Battocchi & Team Yoast, Automatische Aktualisierungen aktiviert code-snippets (1) snippet-5: name: How To Stop Divi Image Crop, scope: global, modified: 2022-09-12 14:30:35 wp-media image_editor: WP_Image_Editor_Imagick
    imagick_module_version: 1691
    imagemagick_version: ImageMagick 6.9.11-60 Q16 x86_64 2021-01-25 https://imagemagick.org
    imagick_version: 3.7.0
    file_uploads: File uploads is turned off
    post_max_size: 50M
    upload_max_filesize: 50M
    max_effective_size: 50 MB
    max_file_uploads: 20
    imagick_limits:
    imagick::RESOURCETYPE_AREA: 251 GB
    imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
    imagick::RESOURCETYPE_FILE: 768
    imagick::RESOURCETYPE_MAP: 251 GB
    imagick::RESOURCETYPE_MEMORY: 126 GB
    imagick::RESOURCETYPE_THREAD: 1
    imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVIF, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, 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, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, 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, POCKETMOD, 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, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
    gd_version: 2.3.3
    gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
    ghostscript_version: 9.53.3 wp-server server_architecture: Linux 5.10.0-20-amd64 x86_64
    httpd_software: Apache
    php_version: 7.4.33 64bit
    php_sapi: apache2handler
    max_input_variables: 1000
    time_limit: 30
    memory_limit: 256M
    max_input_time: -1
    upload_max_filesize: 50M
    php_post_max_size: 50M
    curl_version: 7.74.0 OpenSSL/1.1.1n
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: false wp-database extension: mysqli
    server_version: 10.5.18-MariaDB-0+deb11u1-log
    client_version: mysqlnd 7.4.33
    max_allowed_packet: 134217728
    max_connections: 350 wp-constants WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /home/www/wordpress/wp-content
    WP_PLUGIN_DIR: /home/www/wordpress/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    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 google-site-kit version: 1.96.0
    php_version: 7.4.33
    wp_version: 6.1.1
    reference_url: https://saltdesired.com
    amp_mode: no
    site_status: connected-site
    user_status: authenticated
    verification_status: verified-file
    connected_user_count: 1
    active_modules: site-verification, search-console, analytics, analytics-4, pagespeed-insights, tagmanager
    recoverable_modules: none
    required_scopes:
    openid: ✅
    https://www.googleapis.com/auth/userinfo.profile: ✅
    https://www.googleapis.com/auth/userinfo.email: ✅
    https://www.googleapis.com/auth/siteverification: ✅
    https://www.googleapis.com/auth/webmasters: ✅
    https://www.googleapis.com/auth/analytics.readonly: ✅
    https://www.googleapis.com/auth/tagmanager.readonly: ✅
    capabilities:
    googlesitekit_authenticate: ✅
    googlesitekit_setup: ✅
    googlesitekit_view_posts_insights: ✅
    googlesitekit_view_dashboard: ✅
    googlesitekit_manage_options: ✅
    googlesitekit_update_plugins: ✅
    googlesitekit_view_splash: ✅
    googlesitekit_view_authenticated_dashboard: ✅
    googlesitekit_view_wp_dashboard_widget: ✅
    googlesitekit_view_admin_bar_menu: ✅
    googlesitekit_view_shared_dashboard: ⭕
    googlesitekit_read_shared_module_data::["search-console"]: ⭕
    googlesitekit_read_shared_module_data::["analytics"]: ⭕
    googlesitekit_read_shared_module_data::["pagespeed-insights"]: ⭕
    googlesitekit_manage_module_sharing_options::["search-console"]: ✅
    googlesitekit_manage_module_sharing_options::["analytics"]: ✅
    googlesitekit_manage_module_sharing_options::["pagespeed-insights"]: ✅
    googlesitekit_delegate_module_sharing_management::["search-console"]: ✅
    googlesitekit_delegate_module_sharing_management::["analytics"]: ✅
    googlesitekit_delegate_module_sharing_management::["pagespeed-insights"]: ⭕
    enabled_features:
    adsenseSetupV2: ✅
    dashboardSharing: ✅
    ga4ActivationBanner: ⭕
    ga4Reporting: ⭕
    gm3Components: ⭕
    gteSupport: ⭕
    userInput: ⭕
    search-console_shared_roles: none
    search-console_management: owner
    analytics_shared_roles: none
    analytics_management: owner
    pagespeed-insights_shared_roles: none
    pagespeed-insights_management: all_admins
    search_console_property: https://saltdesired.com/
    analytics_account_id: 2419•••••
    analytics_property_id: UA-2419•••••••
    analytics_profile_id: 2864•••••
    analytics_use_snippet: yes
    analytics_4_property_id: 3577922••
    analytics_4_web_data_stream_id: 4694••••••
    analytics_4_measurement_id: G-P0••••••••
    analytics_4_use_snippet: yes
    tagmanager_account_id: 6057••••••
    tagmanager_container_id: GTM-N38••••
    tagmanager_amp_container_id: none
    tagmanager_use_snippet: yes pll_options browser: 1: Erkennung der Browsersprache aktiviert
    rewrite: 1: /sprache/ aus wohlgeformten Permalinks entfernen
    hide_default: 1: URL Informationen für die Standardsprache verstecken
    force_lang: 1: Die Sprache wird aus dem Verzeichnis-Namen in wohlgeformte Permalinks eingestellt
    redirect_lang: 0: Die URL der Titelseite enthält den Seitennamen oder die Seiten-ID statt dem Sprachcode
    media_support: 1: Die Medien sind übersetzt
    sync: 0: Synchronisation deaktiviert
    post_types: post, page, wp_block, attachment, project
    taxonomies: category, post_tag
    version: 3.3.2
    default_lang: de
    primary-menu: de => 4 | en => 6
    secondary-menu: de => 0 | en => 0
    footer-menu: de => 5 | en => 14
    previous_version: 3.3.1 pll_language_de term_id: 7
    name: Deutsch
    slug: de
    term_group: 0
    term_taxonomy_id: 7
    count: 11
    tl_term_id: 8
    tl_term_taxonomy_id: 8
    tl_count: 5
    locale: de_DE
    is_rtl: 0
    w3c: de-DE
    facebook: de_DE
    home_url: https://saltdesired.com/
    search_url: https://saltdesired.com/
    mo_id: 56
    page_on_front: 1411
    page_for_posts: 0
    flag_code: de
    flag_url: https://saltdesired.com/wp-content/plugins/polylang/flags/de.png
    custom_flag_url: 0 pll_language_en term_id: 10
    name: English
    slug: en
    term_group: 0
    term_taxonomy_id: 10
    count: 13
    tl_term_id: 11
    tl_term_taxonomy_id: 11
    tl_count: 5
    locale: en_US
    is_rtl: 0
    w3c: en-US
    facebook: en_US
    home_url: https://saltdesired.com/en/home-en/
    search_url: https://saltdesired.com/en/
    mo_id: 57
    page_on_front: 1413
    page_for_posts: 0
    flag_code: us
    flag_url: https://saltdesired.com/wp-content/plugins/polylang/flags/us.png
    custom_flag_url: 0 pll_warnings wpml:
    themes/Divi: /home/www/wordpress/wp-content/themes/Divi/wpml-config.xml

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

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Hallo,
    ist doch immer wieder schön, was da so erzählt wird. 😊
    Also: Mit einer Media Query kannst du mit entsprechenden CSS-Kenntnissen relativ einfach dafür sorgen, dass die Überschriften korrekt dargestellt werden.
    Das ist dementsprechend eben kein Problem von WordPress oder dem Block-Editor.

    Das Plugin „Gutenberg“ solltest du nicht installieren. Leider gibt es allgemein ein wenig Verwirrung: In der Regel wird der Block-Editor auch als Gutenberg bezeichnet. Das ist so nicht korrekt, weil es zusätzlich ein Gutenberg-Plugin gibt. Dieses Plugin bietet bestimmte Funktionen an, die man als experimentell betrachten kann. Daher sollte man das Plugin nicht auf Produktivseiten einsetzen. Der Block-Editor ist dagegen der Standard-Editor von WordPress und steht ab der Version 5.0 automatisch als Editor zur Verfügung. Das war nicht immer klar und (nicht nur) deswegen gibt es so viele negative Bewertungen für das Gutenberg-Plugin.
    Solltest du also das Gutenberg-Plugin installiert haben, deaktiviere das Plugin bitte und teste dann, ob es wieder funktioniert.

    Wir können dir bei gekauften Themes (Divi) 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 entsprechende 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 die Entwickler wenden. Lies bitte auch mal in der FAQ II, 1b zu diesem Thema.

    Ob Divi dafür bereits eine Lösung bei den Eigenschaften bietet, kann ich dir aus den genannten Gründen leider nicht sagen. Aber dazu sollte der Support von Divi etwas sagen können.

    Viele Grüße
    Hans-Gerd

    Hallo,
    sonst teste doch mal bitte die folgende CSS-Regel unter Design > Customizer > Zusätzliches CSS (wenn es so etwas bei Divi gibt):

    h1.has-text-align-center.has-text-color {
        font-size: clamp(2.5rem, 0.045rem + 4.77vw, 3.625rem)!important;
    }
    h2.has-text-align-center.has-text-color {
        font-size: clamp(1rem, 0.568rem + 2.16vw, 2.188rem)!important;
    }

    Am besten fügst du die genannten Zeilen ganz am Ende ein.

    Viele Grüße
    Hans-Gerd

    Also ich kann schon nachvollziehen, woher die Aussage des Divi-Supportes kommt. Durch eine Formatierung der Überschriften im Block-Editor erhalten diese unterschiedliche CSS-Klassen, die über diese CSS-Datei des Block-Editors gesteuert werden:
    https://saltdesired.com/wp-includes/css/dist/block-library/style.min.css
    Das dürfte aber nicht das Problem sein.

    Die manuellen Änderungen der Überschriften im Block-Editor, welche die Schriftgröße, -breite usw. betreffen, werden inline (Inline-CSS) gesetzt und so etwas hat immer eine höhere Priorität als CSS-Dateien (also auch die von DIVI).

    „Schuld“ hat der Block-Editor natürlich trotzdem nicht (sondern ist lediglich „ursächlich“), denn das sind schlicht die Regeln der Kaskadierung im CSS (Prioritäten). Ich würde gerne einmal die Antworten des Divi-Supports dazu lesen 🤓

    Der CSS-Code von @hage sollte helfen, mit !important kann man meistens auch Inline-CSS überschreiben.

    Thread-Starter aatmaberlin

    (@aatmaberlin)

    Ich danke euch. Ich habe den Code zum CSS eingefügt, das ich eh schon geschrieben hatte – dies sieht jetzt insgesamt so aus. Es scheint auch zu funktionieren – zumindest teilweise. H1 ist super, bei H2 ist es immernoch so, dass es teilweise über den Rand geht. Aber das versuche ich nochmal mit Divi zu klären.

    Generell: Ist in dem Code alles soweit korrekt? Oder übersehe ich hier etwas, das den Fehler auslöst?

    Liebe Grüße

    .single-post p.has-background {
    padding: 1.25em 0em;
    } .single-post .et_pb_post_content p {
    line-height: 1.8em;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    letter-spacing: 1.7px;
    font-weight: 200;
    color: #3D6075;
    max-width: 900px;
    margin: 0 auto;
    } .et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url {
    padding-top: 70%;
    }
    .et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url > img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    .single-post .et_pb_post_content img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    } .single-post .et_pb_post_content .no-formatting {
    max-width: none;
    margin: 0;
    } .single-post .et_pb_post_content h2,
    .single-post .et_pb_post_content h3,
    .single-post .et_pb_post_content h4,
    .single-post .et_pb_post_content h5,
    .single-post .et_pb_post_content h6 {
    max-width: 900px;
    margin: 0 auto;
    }
    .single-post .et_pb_post_content ul {
    margin: 0 auto;
    padding: 1.25em 0em;
    list-style: none;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    letter-spacing: 1.7px;
    font-weight: 200;
    color: #3D6075;
    max-width: 900px;
    line-height: 1.8em;
    } .single-post .et_pb_post_content ul li {
    margin-bottom: 1.25em;
    }
    /blog image aspect ratio portrait 3:4/
    .pa-blog-image-3-4 .entry-featured-image-url {
    padding-top: 133.33%;
    display: block;
    }
    .pa-blog-image-3-4 .entry-featured-image-url img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    } h1.has-text-align-center.has-text-color {
    font-size: clamp(2.5rem, 0.045rem + 4.77vw, 3.625rem)!important;
    }
    h2.has-text-align-center.has-text-color {
    font-size: clamp(1rem, 0.568rem + 2.16vw, 2.188rem)!important;
    }

    Hallo,
    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.

    Wenn du die CSS-Regeln z. B. über http://csslint.net/ prüfst, dann erscheint z. B. in Zeile 61 ein Fehler. Die Fehler solltest du zunächst beheben.

    Viele Grüße
    Hans-Gerd

    @aatmaberlin

    /blog image aspect ratio portrait 3:4/

    ist verkehrt. CSS-Kommentare werden so geschrieben

    /* blog image aspect ratio portrait 3:4 */

    Bei deinen Überschriften herrscht ein kleines Chaos. Sie werden auf deiner Website entweder über die Sektion bzw. Module klassifiziert (1.) oder über den Block-Editor (2.) oder über das Theme (3.).

    (1.) und (2.) rühren daher, dass du die Überschriften entweder im Divi- oder im Block-Editor geändert hast (Größe, Ausrichtung etc.).

    Daher kommen viele unterschiedlich CSS-Klassen zusammen, folgend ein paar existierende Bespiele

    .et_pb_text_0 h1
    h1.has-text-align-center.has-text-color

    vom Theme kommt dann noch hinzu
    h1
    h1.entry-title

    plus Inline-Styles (s. meinen vorherigen Post)

    Bei der Überschrift h2 wird es noch „vielfältiger“

    .et_pb_text_5 h2
    .et_pb_text_2 h2
    h2.has-text-align-center.has-text-color

    vom Theme kommt dann noch hinzu
    .et_pb_post h2
    .et_pb_post h2.entry-title
    h2.entry-title

    plus Inline-Styles (s. meinen vorherigen Post)

    Vermutlich finden sich noch weitere und für Überschrift h3 dürfte es ähnlich aussehen. Je öfters du im Divi-Editor oder im Block-Editor ein Überschriften-Format änderst, umso größer wird die Liste.

    Vergib stattdessen eine CSS-Klasse und steuere das Aussehen darüber (Farbe, Größe, Schriftbreite usw.). Aber das würde jetzt wirklich zu weit führen, dafür musst du dich selbst mit CSS beschäftigen, Hans-Gerd hat dir oben hilfreiche Quellen genannt.

    Willst du die Formate weiterhin mit Divi bearbeiten (was nicht überall möglich ist), dann schau dir einmal diese Seite an
    https://www.elegantthemes.com/blog/theme-releases/responsive-editing-hover-editing-for-divi
    wenn du – wie dort gezeigt – auf Tablet oder Smartphone klickst, kannst du über den Tab Design auch die Schriftgröße anpassen.

    Thread-Starter aatmaberlin

    (@aatmaberlin)

    Ich danke euch für eure Hilfe!

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Das Thema „Gutenberg ist nicht responsive“ ist für neue Antworten geschlossen.