Gutenberg ist nicht responsive | WordPress.org Deutsch

Gelöst

(@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)

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 1 Monat

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
Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 1 Monat
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
- Diese Antwort wurde geändert vor 1 Jahr, 1 Monat von Hans-Gerd Gerhards.
Moderator Angelika Reisiger
(@la-geek)

vor 1 Jahr, 1 Monat

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)

vor 1 Jahr
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;
}
```
Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr

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

Moderator Angelika Reisiger
(@la-geek)

vor 1 Jahr

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

vor 1 Jahr

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.

Ansichten