Support » Themes » Kommentare Mobile Ansicht immer schmaler

  • Gelöst mvittel

    (@mvittel)


    Hallo, da bin ich mal wieder und freue mich euch eine Frage zu stellen, die ihr Profis doch bestimmt beantworten könnt 🙂
    (Sollte ich eine falsche Kategorie gewählt haben, dann bitte verschieben)
    Wie die Überschrift es schon sagt, geht es um Kommentare, hier habe ich das Problem in der Mobilen Ansicht das je mehr Antworten es sind, die Texte dann ab dem 5ten Eintrag nur noch pro Zeile ein Buchstabe ersichtlich ist.
    Es wird bestimmt dafür eine Lösung in Form einer zusätzliches CSS geben, oder?

    Beispiel Eintrag: „Marc.Vittel sagt: 10. September 2023 um 20:55 Uhr“
    Link: https://www.gdz.bplaced.net/fussball-event-2023/#comment-137

    `
    ### wp-core ###
    
    version: 6.3.1
    site_language: de_DE
    user_language: de_DE
    timezone: Europe/Berlin
    permalink: /blog/%year%/%monthnum%/%day%/%postname%/
    https_status: true
    multisite: false
    user_registration: 1
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 1438
    dotorg_communication: true
    
    ### wp-paths-sizes ###
    
    wordpress_path: /users/gdz/www
    wordpress_size: 2,06 GB (2209476824 bytes)
    uploads_path: /users/gdz/www/wp-content/uploads
    uploads_size: 119,71 MB (125523552 bytes)
    themes_path: /users/gdz/www/wp-content/themes
    themes_size: 5,69 MB (5963973 bytes)
    plugins_path: /users/gdz/www/wp-content/plugins
    plugins_size: 167,90 MB (176053755 bytes)
    database_size: 101,43 MB (106358392 bytes)
    total_size: 2,44 GB (2623376496 bytes)
    
    ### wp-dropins (1) ###
    
    object-cache.php: true
    
    ### wp-active-theme ###
    
    name: Newsup Pro (newsup-pro)
    version: 3.9.9.31
    author: Themeansar
    author_website: https://themeansar.com
    parent_theme: none
    theme_features: core-block-patterns, editor-style, widgets-block-editor, automatic-feed-links, title-tag, post-thumbnails, menus, html5, custom-background, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, customize-selective-refresh-widgets, align-wide, custom-logo, custom-header, post-formats, amp, widgets
    theme_path: /users/gdz/www/wp-content/themes/newsup-pro
    auto_update: Deaktiviert
    
    ### wp-themes-inactive (2) ###
    
    Newsbulk: version: 1.2, author: Themeansar, Automatische Aktualisierungen deaktiviert
    Newsup: version: 3.0.0.106, author: Themeansar, Automatische Aktualisierungen deaktiviert
    
    ### wp-plugins-active (29) ###
    
    Accept Donations with PayPal: version: 1.3.4, author: Scott Paterson, Automatische Aktualisierungen deaktiviert
    Ansar Import: version: 1.0.15, author: Themeansar, Automatische Aktualisierungen deaktiviert
    Anti-Spam by CleanTalk: version: 6.18, author: СleanTalk <welcome@cleantalk.org>, Automatische Aktualisierungen deaktiviert
    Asgaros Forum: version: 2.7.0, author: Thomas Belser, Automatische Aktualisierungen deaktiviert
    Better Messages: version: 2.2.18, author: WordPlus, Automatische Aktualisierungen deaktiviert
    Change WordPress Login Logo: version: 1.2, author: Boopathi Rajan, Automatische Aktualisierungen deaktiviert
    Classic Editor: version: 1.6.3, author: WordPress Contributors, Automatische Aktualisierungen deaktiviert
    Complianz | GDPR/CCPA Cookie Consent: version: 6.5.4, author: Really Simple Plugins, Automatische Aktualisierungen deaktiviert
    Countdown builder: version: 2.6.5, author: Adam Skaat, Automatische Aktualisierungen deaktiviert
    Defender: version: 4.1.0, author: WPMU DEV, Automatische Aktualisierungen deaktiviert
    Flexible Table Block: version: 3.0.1, author: Aki Hamano, Automatische Aktualisierungen deaktiviert
    Flipbox - Awesomes Flip Boxes Image Overlay: version: 2.9.3, author: Biplob Adhikari, Automatische Aktualisierungen deaktiviert
    Gutena Tabs: version: 1.0.5, author: ExpressTech, Automatische Aktualisierungen deaktiviert
    Header and Footer Scripts: version: 2.2.1, author: Digital Liberation, Automatische Aktualisierungen deaktiviert
    Login Logout Menu: version: 1.4.0, author: WPBrigade, Automatische Aktualisierungen deaktiviert
    Performance Lab: version: 2.6.1, author: WordPress Performance Team, Automatische Aktualisierungen deaktiviert
    Real Media Library (Free): version: 4.21.11, author: devowl.io, Automatische Aktualisierungen deaktiviert
    Shortcodes Ultimate: version: 5.13.2, author: Vova Anokhin, Automatische Aktualisierungen deaktiviert
    Site Kit by Google: version: 1.110.0, author: Google, Automatische Aktualisierungen deaktiviert
    Super Socializer: version: 7.13.59, author: Team Heateor, Automatische Aktualisierungen deaktiviert
    Table of Contents Plus: version: 2309, author: Michael Tran, Automatische Aktualisierungen deaktiviert
    UpdraftPlus - Backup/Restore: version: 1.23.10, author: UpdraftPlus.Com, DavidAnderson, Automatische Aktualisierungen deaktiviert
    User Role Editor: version: 4.64, author: Vladimir Garagulya, Automatische Aktualisierungen deaktiviert
    WP-Sweep: version: 1.1.8, author: Lester 'GaMerZ' Chan, Automatische Aktualisierungen deaktiviert
    WPCode Lite: version: 2.1.3.1, author: WPCode, Automatische Aktualisierungen deaktiviert
    WP Dark Mode: version: 4.2.3, author: WPPOOL, Automatische Aktualisierungen deaktiviert
    WP Statistics: version: 14.1.6.2, author: VeronaLabs, Automatische Aktualisierungen deaktiviert
    Yoast Duplicate Post: version: 4.5, author: Enrico Battocchi & Team Yoast, Automatische Aktualisierungen deaktiviert
    Yoast SEO: version: 21.2, author: Team Yoast, Automatische Aktualisierungen deaktiviert
    
    ### wp-plugins-inactive (6) ###
    
    Accordion Blocks: version: 1.5.0, author: Phil Buchanan, Automatische Aktualisierungen deaktiviert
    Advanced Editor Tools: version: 5.9.2, author: Automattic, Automatische Aktualisierungen deaktiviert
    Antispam Bee: version: 2.11.5, author: pluginkollektiv, Automatische Aktualisierungen deaktiviert
    Bellows Accordion Menu: version: 1.4.2, author: SevenSpark, Automatische Aktualisierungen deaktiviert
    CM Tooltip Glossary: version: 4.2.8, author: CreativeMindsSolutions, Automatische Aktualisierungen deaktiviert
    TomS Image Slider: version: 1.1.5, author: Tom Sneddon, Automatische Aktualisierungen deaktiviert
    
    ### wp-media ###
    
    image_editor: WP_Image_Editor_GD
    imagick_module_version: Nicht verfügbar
    imagemagick_version: Nicht verfügbar
    imagick_version: Nicht verfügbar
    file_uploads: File uploads is turned off
    post_max_size: 132M
    upload_max_filesize: 128M
    max_effective_size: 128 MB
    max_file_uploads: 20
    gd_version: bundled (2.1.0 compatible)
    gd_formats: GIF, JPEG, PNG, WebP, BMP, AVIF
    ghostscript_version: 9.53.3
    
    ### wp-server ###
    
    server_architecture: x86_64 x86_64 x86_64
    httpd_software: Apache
    php_version: 8.1.13 64bit
    php_sapi: cgi-fcgi
    max_input_variables: 5000
    time_limit: 60
    memory_limit: 256M
    max_input_time: 300
    upload_max_filesize: 128M
    php_post_max_size: 132M
    curl_version: 7.74.0 OpenSSL/1.1.1n
    suhosin: false
    imagick_availability: false
    pretty_permalinks: true
    htaccess_extra_rules: true
    current: 2023-09-26T18:19:01+00:00
    utc-time: Tuesday, 26-Sep-23 18:19:01 UTC
    server-time: 2023-09-26T20:18:59+02:00
    
    ### wp-database ###
    
    extension: mysqli
    server_version: 10.5.19-MariaDB-0+deb11u2
    client_version: mysqlnd 8.1.13
    max_allowed_packet: 268435456
    max_connections: 144
    
    ### wp-constants ###
    
    WP_HOME: undefined
    WP_SITEURL: https://www.gdz.bplaced.net/
    WP_CONTENT_DIR: /users/gdz/www/wp-content
    WP_PLUGIN_DIR: /users/gdz/www/wp-content/plugins
    WP_MEMORY_LIMIT: 256M
    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
    WP_DEVELOPMENT_MODE: undefined
    DB_CHARSET: utf8mb4
    DB_COLLATE: undefined
    
    ### wp-filesystem ###
    
    wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    
    ### google-site-kit ###
    
    version: 1.110.0
    php_version: 8.1.13
    wp_version: 6.3.1
    reference_url: https://www.gdz.bplaced.net
    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
    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-4"]: ⭕
    	googlesitekit_read_shared_module_data::["pagespeed-insights"]: ⭕
    	googlesitekit_manage_module_sharing_options::["search-console"]: ✅
    	googlesitekit_manage_module_sharing_options::["analytics-4"]: ✅
    	googlesitekit_manage_module_sharing_options::["pagespeed-insights"]: ✅
    	googlesitekit_delegate_module_sharing_management::["search-console"]: ✅
    	googlesitekit_delegate_module_sharing_management::["analytics-4"]: ✅
    	googlesitekit_delegate_module_sharing_management::["pagespeed-insights"]: ⭕
    enabled_features: 
    	adsenseSetupV2: ✅
    	enhancedMeasurement: ⭕
    	ga4Reporting: ✅
    	gm3Components: ⭕
    	newsKeyMetrics: ⭕
    	userInput: ⭕
    search-console_shared_roles: none
    search-console_management: owner
    analytics-4_shared_roles: none
    analytics-4_management: owner
    pagespeed-insights_shared_roles: none
    pagespeed-insights_management: all_admins
    search_console_property: https://www.gdz.bplaced.net/
    analytics_account_id: 2770•••••
    analytics_property_id: none
    analytics_profile_id: none
    analytics_use_snippet: yes
    analytics_4_property_id: 3951735••
    analytics_4_web_data_stream_id: 5780••••••
    analytics_4_measurement_id: G-81••••••••
    analytics_4_use_snippet: yes
    
    `

    Hier noch ein Bild, wie es aussieht…

    • Dieses Thema wurde geändert vor 7 Monaten, 3 Wochen von Bego Mario Garde.
    • Dieses Thema wurde geändert vor 7 Monaten, 3 Wochen von Angelika Reisiger. Grund: Beiträge zusammengeführt. Bitte den Button "Bearbeiten" benutzen

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

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Hallo,
    das liegt daran, dass hier eine gewisse Hierarchie durch die Listenelemente vorgegeben ist, um deutlich zu machen, welche Antworten zu Kommentaren gegeben worden sind.

    Helfen könnte zwar voraussichtlich die folgende CSS-Regel unter Design > Customizer > Zusätzliches CSS allerdings auf Kosten der dann nicht mehr offensichtlichen Zusammengehörigkeit der Kommentare und jeweiligen Antworten. Daher auch die Media Query:

    @media (max-width: 768px) {
    div#comments ol, div#comments li, div#comments article {
        padding: 0px;
        margin: 0px;
    }
    }

    Die o. g. Werte für padding und margin kannst du natürlich noch individuell anpassen.

    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde geändert vor 7 Monaten, 3 Wochen von Hans-Gerd Gerhards. Grund: Code formatiert
    Thread-Starter mvittel

    (@mvittel)

    Vielen Dank für diese Lösung, das ist schonmal besser, schade das antworten nicht ein Stück eingerückt sind, aber damit muss man dann leben. Habe da noch eine Weitere Frage, um es etwas besser zu gestalten.
    Kann man das Bild des Users nur in der Mobilen Ansicht ausblenden?
    Für alle Ansichten würde mir nur dieses einfallen, was aber leider nicht alles entfernen würde:

    .comments-area .comment-meta .comment-author img {
        width: 0px;
      }

    Hallo @mvittel

    Versuche es einmal mit diesem Code:

    @media only screen and (max-width: 1000px) {
    	ol.comment-list {
    		padding-inline-start:0;
    	}
    	ol.comment-list ol.children {
    		margin-left: 0;
    	}
    	.comments-area .comment-body {
    		padding: 0;
    	}
    	div#comments {
    		padding: 20px 0;
    	}
    	.comments-area .comment-meta .comment-author img.avatar {
    		position: relative;
    		width: 40px;
    		top: 0;
    	}
    	.comment-author.vcard {
    		display: flex;
    		flex-wrap: wrap;
    		flex-direction: row;
    		gap: 10px
    	}
    	.comments-area .comment-content {
    		padding-right: 0;
    	}	
    }

    als Alternative zum Code von @hage. Das sollte auch das Problem mit dem Avatar lösen und auch auf Tablet-Ansicht funktionieren.

    Auf Tablet sieht es momentan noch so aus:

    Hallo,
    vermutlich ist die Lösung von Angelika besser.
    Wenn nicht, dann hilft vielleicht das hier:

    
    @media (max-width: 768px) {
    .comment-author.vcard img {
        display: none;
    }
    }

    Viele Grüße
    Hans-Gerd

    Thread-Starter mvittel

    (@mvittel)

    Klasse, das sieht doch jetzt wieder lesbar aus 🙂
    Ich sage mal danke für eure Hilfe.

    super – freut uns. Danke für die Rückmeldung und “Gelöst”-Markieren. 👍

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)
  • Das Thema „Kommentare Mobile Ansicht immer schmaler“ ist für neue Antworten geschlossen.