Fehler im CSS, Seite nicht auf 100% Breite

  • Gelöst trm2000

    (@trm2000)


    vor 1 Jahr, 2 Monaten

    Hallo, auf der Webseite klappt die Seitenbreite nicht bei allen mobilen Geräten. Getestet habe ich es mittels Entwicklerkonsole im Chrome-Browser, indem ich dort einzelne Geräte eingestellt habe. Nach der Auswahl vom Ipad Air ist es besonders zu sehen.

    Leider finde ich nicht die entsprechenden Stellen im Code, die das verursachen. Hat jemand bitte die Möglichkeit, mir zu helfen?

    Mit freundlichen Grüßen
    Mathias

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

Ansicht von 12 Antworten – 1 bis 12 (von insgesamt 12)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 2 Monaten

    Hallo,
    lies doch bitte mal: Bevor du ein neues Thema (Thread) erstellst.

    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 trm2000

    (@trm2000)

    vor 1 Jahr, 2 Monaten

    Hallo, entschuldigung, das hatte ich in der Aufregung vergessen.

    wp-core

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

wp-paths-sizes

wordpress_path: /home/users/kh_36734/www/wordpress
wordpress_size: 584,11 MB (612484097 bytes)
uploads_path: /home/users/kh_36734/www/wordpress/wp-content/uploads
uploads_size: 696,01 MB (729815034 bytes)
themes_path: /home/users/kh_36734/www/wordpress/wp-content/themes
themes_size: 12,76 MB (13381556 bytes)
plugins_path: /home/users/kh_36734/www/wordpress/wp-content/plugins
plugins_size: 72,34 MB (75850684 bytes)
database_size: 52,50 MB (55050240 bytes)
total_size: 1,38 GB (1486581611 bytes)

wp-active-theme

name: Cozyma Organizing (cozyma-organizing)
version: 2023-05-29-1327
author: Mathias Fiege
author_website: https://www.NoGAD.de
parent_theme: none
theme_features: core-block-patterns, widgets-block-editor, automatic-feed-links, title-tag, post-thumbnails, menus, html5, custom-background, customize-selective-refresh-widgets, custom-logo, custom-header, widgets, editor-style
theme_path: /home/users/kh_36734/www/wordpress/wp-content/themes/cozyma-organizing
auto_update: Deaktiviert

wp-themes-inactive (1)

Twenty Twenty-Three: version: 1.1, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert

wp-plugins-active (16)

Admin and Site Enhancements: version: 5.3.0, author: Bowo, Automatische Aktualisierungen aktiviert
Booking Calendar WpDevArt: version: 3.2.7, author: WpDevArt, Automatische Aktualisierungen aktiviert
Contact Form 7: version: 5.7.7, author: Takayuki Miyoshi, Automatische Aktualisierungen aktiviert
Duplicator Pro: version: 4.5.11, author: Duplicator, Automatische Aktualisierungen deaktiviert
Easy Pricing Tables: Free: version: 3.2.4, author: Fatcat Apps, Automatische Aktualisierungen deaktiviert
Flexible Table Block: version: 2.9.1, author: Aki Hamano, Automatische Aktualisierungen deaktiviert
Friendly Captcha for WordPress: version: 1.10.6, author: Friendly Captcha GmbH, Automatische Aktualisierungen aktiviert
Health Check & Troubleshooting: version: 1.6.0, author: The WordPress.org community, Automatische Aktualisierungen aktiviert
Indeed Easy Pricing Tables: version: 2.4, author: WP Indeed, Automatische Aktualisierungen deaktiviert
Insert Special Characters: version: 1.0.7, author: 10up, Automatische Aktualisierungen aktiviert
Popup Maker: version: 1.18.2, author: Popup Maker, Automatische Aktualisierungen aktiviert
Real Media Library: version: 5.30.0, author: devowl.io, Automatische Aktualisierungen deaktiviert
Spectra: version: 2.6.9, author: Brainstorm Force, Automatische Aktualisierungen aktiviert
Spotlight - Social Media Feeds: version: 1.6.1, author: RebelCode, Automatische Aktualisierungen aktiviert
Super List Block: version: 0.1.1, author: Aurooba Ahmed, Automatische Aktualisierungen aktiviert
WordPress Responsive CSS3 Pricing Tables: version: 2.3.4, author: Realwebcare, 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.4.4
file_uploads: File uploads is turned off
post_max_size: 72M
upload_max_filesize: 64M
max_effective_size: 64 MB
max_file_uploads: 20
imagick_limits:
imagick::RESOURCETYPE_AREA: 122 MB
imagick::RESOURCETYPE_DISK: 1073741824
imagick::RESOURCETYPE_FILE: 768
imagick::RESOURCETYPE_MAP: 512 MB
imagick::RESOURCETYPE_MEMORY: 256 MB
imagick::RESOURCETYPE_THREAD: 1
imagick::RESOURCETYPE_TIME: 1.844674407371E+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-72-generic x86_64
httpd_software: Apache
php_version: 7.4.3-4ubuntu2.19 64bit
php_sapi: fpm-fcgi
max_input_variables: 1000
time_limit: 60
memory_limit: 128M
max_input_time: 60
upload_max_filesize: 64M
php_post_max_size: 72M
curl_version: 7.68.0 OpenSSL/1.1.1f
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: true

wp-database

extension: mysqli
server_version: 10.3.38-MariaDB-0ubuntu0.20.04.1
client_version: mysqlnd 7.4.3-4ubuntu2.19
max_allowed_packet: 16777216
max_connections: 200

wp-constants

WP_HOME: undefined
WP_SITEURL: https://www.cozyma-organizing.de/
WP_CONTENT_DIR: /home/users/kh_36734/www/wordpress/wp-content
WP_PLUGIN_DIR: /home/users/kh_36734/www/wordpress/wp-content/plugins
WP_MEMORY_LIMIT: 128M
WP_MAX_MEMORY_LIMIT: 128M
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: utf8mb4
DB_COLLATE: undefined

wp-filesystem

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

    LG Mathias

    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 2 Monaten

    auf der Webseite klappt die Seitenbreite nicht bei allen mobilen Geräten.

    Wo genau siehst du denn da ein Problem? Ohne die konkreten Layout-Wünsche zu kennen, sieht die Webseite völlig OK aus. Das Header-Bild wird auch in allen Auflösungen über die gesamte Breite angezeigt. Dass z.B. farblich hinterlegte Absätze („Das bin ich …“, „Schau dir gerne meine Angebote an …“) nicht die gesamte Breite abdecken, hat mit der gewählten Absatzbreite zu tun.

    Selbst erstellte Themes lassen sich für Außenstehende schlechter beurteilen, weil wir den verwendeten Code nicht kennen. Ohne Website-Bericht können wir auch nur raten, wie du deine Website aufgesetzt hast. Bitte lies dir dazu den angehefteten Beitrag durch: Bevor du ein neues Thema (Thread) erstellst.

    Nachtrag: Antworten haben sich überschnitten

    Thread-Starter trm2000

    (@trm2000)

    vor 1 Jahr, 2 Monaten

    Hier ist ein Screenshot. Die rechte Seite ist „der „fehlerhaft“

    Moderationshinweis: Bitte lies dir den FAQ-Beitrag durch: Wie kann man hier Bilder in einen Forenbeitrag einfügen? Unser Forum unterstützt keinen BBCode.

    Danke für die Korrektur des Bildes.

    • Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von trm2000.
    • Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von Bego Mario Garde.
    • Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von trm2000. Grund: Danke
    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 2 Monaten

    Das kann ich weder auf meinem Laptop noch auf einem iPad reproduzieren.

    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 2 Monaten

    Noch ein Hinweis zum Website-Bericht:

    • PHP 7.4 ist veraltet und sollte nicht mehr genutzt werden. Du solltest im Kundenmenü des Webhosters eine neuere Version finden.
    • Aus irgendeinem Grund hast du in der wp-config.php die Zeile define('WP_SITEURL', 'https://www.coz…ing.de/'eingetragen. Das macht eigentlich nur Sinn, wenn du laufend zwischen Entwicklungs-, Staging- und Produktions-Server wechselst.

    Für das beschriebene Problem ist das allerdings irrelevant. Der Website-Bericht ist trotzdem hilfreich, weil wir z.B. sehen, dass du keinen zusätzlichen Pagebuilder einsetzt. Dass wir zu eigenen Themes nichts sagen können, hatte ich bereits erwähnt.

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 1 Jahr, 2 Monaten

    @pixolin
    bei einer Breite von z. B. 900px in der developer console sehe ich das genannte Problem.

    @trm2000
    da es sich um ein „eigenes“ Theme handelt, solltest du dich an die Entwickler wenden. Uns steht das Theme nicht zur Verfügung.

    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 2 Monaten

    @hage
    🤔 Wer wohl bei einem „eigenen“ Theme der Entwickler ist? 😜

    @trm2000
    Füg‘ bitte im Customizer > Zusätzliches CSS folgende Zeilen ein:

    #page {
  overflow: hidden;
}
    Thread-Starter trm2000

    (@trm2000)

    vor 1 Jahr, 2 Monaten

    #page { overflow: hidden; }

    @pixolin

    Perfekt, vielen Dank.

    Wie hast Du das herausgefunden?

    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 2 Monaten

    Ich schaue mir bei solchen Fällen die Entwicklertools des Browsers an und habe (Dank Hinweis von @hage) bei der betreffenden Stelle gesehen, dass das Hintergrundbild rausschaut, wenn man seitlich scrollt.

    Wenn Elemente eines Wrappers (in dem Fall <div id="page" class="site">…</div>) wie in diesem Fall breiter sind, als das Elternelement, könntest du die einzelnen Blöcke durchgehen und suchen, welcher davon zu breit ist. overflow:hidden ist ein kleiner Workaround, mit dem sich das Verhalten des Wrappers recht einfach ändern lässt.

    Thread-Starter trm2000

    (@trm2000)

    vor 1 Jahr, 2 Monaten

    Vielen lieben Dank 🙂

    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 2 Monaten

    Gerne. Apropos Entwickler-Tools: In Firefox gibt es einen Tab „Barrierefreiheit“, mit dem du die Website bezüglich Kontrast prüfen solltest:

    Screenshot
    Zum Vergrößern bitte anklicken …

    (Ich habe einige Textstelle unkenntlich gemacht.)

Ansicht von 12 Antworten – 1 bis 12 (von insgesamt 12)
  • Das Thema „Fehler im CSS, Seite nicht auf 100% Breite“ ist für neue Antworten geschlossen.

Schlagwörter