Kommentare Mobile Ansicht immer schmaler

  • Gelöst mvittel

    (@mvittel)


    vor 11 Monaten, 3 Wochen

    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 11 Monaten, 3 Wochen von Bego Mario Garde.
    • Dieses Thema wurde geändert vor 11 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)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 11 Monaten, 3 Wochen

    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 11 Monaten, 3 Wochen von Hans-Gerd Gerhards. Grund: Code formatiert
    Thread-Starter mvittel

    (@mvittel)

    vor 11 Monaten, 3 Wochen

    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;
  }
    Moderator Angelika Reisiger

    (@la-geek)

    vor 11 Monaten, 3 Wochen

    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:

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 11 Monaten, 3 Wochen

    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)

    vor 11 Monaten, 3 Wochen

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

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 11 Monaten, 3 Wochen

    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.