Support » Themes » Fehler im CSS, Seite nicht auf 100% Breite

  • Gelöst trm2000

    (@trm2000)


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

    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

    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

    • Diese Antwort wurde geändert vor 10 Monaten, 2 Wochen von Bego Mario Garde.
    Thread-Starter trm2000

    (@trm2000)

    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 10 Monaten, 2 Wochen von trm2000.
    • Diese Antwort wurde geändert vor 10 Monaten, 2 Wochen von Bego Mario Garde.
    • Diese Antwort wurde geändert vor 10 Monaten, 2 Wochen von trm2000. Grund: Danke

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

    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.

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

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

    #page { overflow: hidden; }

    @pixolin

    Perfekt, vielen Dank.

    Wie hast Du das herausgefunden?

    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)

    Vielen lieben Dank 🙂

    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.