Skallierung von PC-Bildschirm zu Smartphone stimmt nicht

Gelöst

(@dennis600)

Hallo zusammen,

an unserer Homepage geht es immer weiter und mittlerweile sieht sie auch schon ganz ansprechend aus. (Soll jetzt kein Eigenlob sein).
Allerdings sieht die Seite auf einem Smartphone nicht mehr schön aus. Die Propertionen zu Schrift und Bild passen nicht mehr zueinander.

Im Customizer habe ich zwar Einstellungen für das „Mobile-Menü“, aber da geht es nur um Farben.

Jetzt ist meine Frage leider etwas allgemein und nicht sonderlich spezifisch. Ich würde gerne wissen, wie ich vorgehen muss, dass die Seite auf kleinen Bildschirmen so skalliert wird, dass sie der Darstellung auf größeren Bildschirmen gleicht. Also die Propertionen zwischen Bild und Text.

Entweder habe ich es dieses mal in den Richtlinien überlesen oder ihr habt es rausgenommen, aber ich meine ich sollte immer den Zustandsbericht der Seite mit angeben. Das wäre der Bericht:


### wp-core ###

version: 6.0.2
site_language: de_DE
user_language: de_DE
permalink: /%postname%
https_status: true
user_registration: 0
default_comment_status: open
multisite: false
user_count: 1
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /homepages/19/d893448070/htdocs/clickandbuilds/CENTEREngineering
wordpress_size: 59,00 MB (61869130 bytes)
uploads_path: /homepages/19/d893448070/htdocs/clickandbuilds/CENTEREngineering/wp-content/uploads
uploads_size: 7,53 MB (7897964 bytes)
themes_path: /homepages/19/d893448070/htdocs/clickandbuilds/CENTEREngineering/wp-content/themes
themes_size: 9,61 MB (10072817 bytes)
plugins_path: /homepages/19/d893448070/htdocs/clickandbuilds/CENTEREngineering/wp-content/plugins
plugins_size: 219,72 MB (230389909 bytes)
database_size: 15,89 MB (16662528 bytes)
total_size: 311,75 MB (326892348 bytes)

### wp-active-theme ###

name: Vantage (vantage)
version: 1.19.12 (latest version: 1.20.3)
author: SiteOrigin
author_website: https://siteorigin.com/
parent_theme: none
theme_features: core-block-patterns, automatic-feed-links, post-thumbnails, siteorigin-panels, menus, post-formats, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, custom-logo, title-tag, align-wide, infinite-scroll, siteorigin-template-settings, siteorigin-premium-no-attribution, siteorigin-premium-ajax-comments, widgets
theme_path: /homepages/19/d893448070/htdocs/clickandbuilds/CENTEREngineering/wp-content/themes/vantage

### wp-themes-inactive (5) ###

eStar: version: 1.3.4, author: GretaThemes (latest version: 1.3.5)
Harrison: version: 1.3.6, author: ThemeZee (latest version: 1.3.8)
Poseidon: version: 2.3.6, author: ThemeZee (latest version: 2.3.8)
Tortuga: version: 2.3.5, author: ThemeZee (latest version: 2.3.7)
Treville: version: 2.1.5, author: ThemeZee (latest version: 2.1.7)

### wp-mu-plugins (2) ###

1&1 Product Subdomain: version: 1.1.0, author: 1&1
Health Check Troubleshooting Mode: author: (undefined), version: 1.7.2

### wp-plugins-active (27) ###

Advanced Editor Tools (previously TinyMCE Advanced): version: 5.6.0, author: Automattic
AinoBlocks - Gutenberg Page Builder Blocks: version: 1.12.2, author: ElmaStudio
All in One SEO: version: 4.2.5.1, author: All in One SEO Team
Antispam Bee: version: 2.11.1, author: pluginkollektiv
Avadanta Companion: version: 1.4.5, author: avadantathemes
Broken Link Checker: version: 1.11.18, author: WPMU DEV
eRocket: version: 1.2.3, author: eLightUp
Evento: version: 1.0.19, author: nayrathemes
Google Analytics for WordPress by MonsterInsights: version: 8.9.0, author: MonsterInsights
Health Check & Troubleshooting: version: 1.4.5, author: The WordPress.org community (latest version: 1.5.0)
Icyclub: version: 1.9.3, author: themeicy
Impressum: version: 2.0.0, author: Epiphyt
Kadence Blocks – Gutenberg Blocks for Page Builder Features: version: 2.4.14, author: Kadence WP
Kaya QR Code Generator: version: 1.4.2, author: Kaya Studio
Limit Login Attempts Reloaded: version: 2.25.5, author: Limit Login Attempts Reloaded
Meta Box: version: 5.6.7, author: MetaBox.io
Page Builder by SiteOrigin: version: 2.17.0, author: SiteOrigin
Popularis Extra: version: 1.2.0, author: Themes4WP
Real Cookie Banner (Free): version: 3.1.6, author: devowl.io
SiteOrigin CSS: version: 1.5.3, author: SiteOrigin
SiteOrigin Widgets Bundle: version: 1.42.0, author: SiteOrigin
Smart Slider 3: version: 3.5.1.9, author: Nextend
SpiceBox: version: 2.1.3, author: Spicethemes
Statify: version: 1.8.3, author: pluginkollektiv
WPForms Lite: version: 1.7.6, author: WPForms
WP Maintenance Mode & Coming Soon: version: 2.5.1, author: Themeisle
WPS Hide Login: version: 1.9.6, author: WPServeur, NicolasKulka, wpformation

### wp-media ###

image_editor: WP_Image_Editor_GD
imagick_module_version: Nicht verfügbar
imagemagick_version: Nicht verfügbar
gd_version: 2.2.5
ghostscript_version: 9.27

### wp-server ###

server_architecture: Linux 4.4.302-icpu-088 x86_64
httpd_software: Apache
php_version: 7.4.30 64bit
php_sapi: cgi-fcgi
max_input_variables: 1000
time_limit: 30
memory_limit: 1024M
max_input_time: -1
upload_max_size: 128M
php_post_max_size: 128M
curl_version: 7.64.0 OpenSSL/1.1.1n
suhosin: false
imagick_availability: false
server-headers: 
	content-type: text/html; charset=UTF-8
	date: Thu, 22 Sep 2022 16:56:50 GMT
	server: Apache
	x-powered-by: PHP/7.4.30
	expires: Wed, 11 Jan 1984 05:00:00 GMT
	cache-control: no-cache, must-revalidate, max-age=0
	x-pingback: https://center-engineering.de/xmlrpc.php
	link: <https://center-engineering.de/wp-json/>; rel="https://api.w.org/", <https://center-engineering.de/wp-json/wp/v2/pages/2>; rel="alternate"; type="application/json", <https://center-engineering.de/>; rel=shortlink
	content-encoding: gzip
htaccess_extra_rules: true

### wp-database ###

extension: mysqli
server_version: 10.5.17-MariaDB-1:10.5.17+maria~deb11-log
client_version: mysqlnd 7.4.30

### wp-constants ###

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /homepages/19/d893448070/htdocs/clickandbuilds/CENTEREngineering/wp-content
WP_PLUGIN_DIR: /homepages/19/d893448070/htdocs/clickandbuilds/CENTEREngineering/wp-content/plugins
WP_MAX_MEMORY_LIMIT: 1024M
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_LOCAL_DEV: undefined

### wp-filesystem ###

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

### aioseo (1) ###

noindexed: Suchseite

### wpforms ###

version: 1.7.6
lite: Dez 24, 2021 @ 2:00pm
upload_dir: Beschreibbar
db_tables: MAWXWfqWwpforms_logs, MAWXWfqWwpforms_tasks_meta
total_forms: 1
total_submissions: 2

Vielen Dank vorab!

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 1 Jahr, 7 Monaten

Hallo,
bei dem von dir verwendeten Theme Vantage solltest du den Breakpoint für das mobile Menü (Hamburger) ändern. Momentan ist dieser Breakpoint bei 480px gesetzt.

Das kannst du bei dem Theme wie folgt machen: Design > Customizer > Deine Anpassungen für ▸ Theme-Einstellungen > Navigation und dann bei „Einklappen des Mobile-Menü
Die Auflösung, wann das Menü zum Mobile-Menü einklappen soll. Wert in Pixel angeben.“ als Wert z. B. 980 eingeben.

Der Wert ist allerdings auch abhängig von dem gewählten Logo. Daher würde ich ein kleineres Logo verwenden, damit in der Navigation die Menüpunkte rechts ausreichend Platz haben und dementsprechend kannst du dann einen kleineren Wert verwenden, siehe Deine Anpassungen für ▸ Theme-Einstellungen > Logo. Da gibt es allerdings auch noch die Option „Logo-Höhe begrenzen“, die du wählen könntest. Besser ist aber, wenn du das Logo in einer entsprechenden Größe erstellst, hochlädst und dann verwendest.

Viele Grüße
Hans-Gerd

Thread-Starter dennis600
(@dennis600)

vor 1 Jahr, 7 Monaten

Hallo Hans-Gerd,

vielen Dank für deine Antwort. Ich habe es mit dem Wert von 980px versucht und die Seite gefällt mir schon besser.

Wenn ich das Logo in der Höhe begrenze, dann sieht es auf einem größeren Bildshcirm leider nicht mehr schön aus bzw. das ist mir da dann zu klein. Da werde ich dann wohl eher deinen Tipp mit der Bildgröße anwenden und damit mal etwas rumprobieren.

Bis jetzt gefällt mir in der mobilen Version nur noch nicht, dass das Bild auf der Startseite (nicht das Logo) im Vergleich zum Text viel zu klein ist. Gibt es da auch noch etwas, das ich einstellen kann, muss ich da auch mit der Bild- und Textgröße spielen oder liegt das eventuell an einer falschen Seitengestaltung von mir?

Viele Grüße!
Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 7 Monaten
Hallo,
schau mal bitte unter Design > Deine Anpassungen für ▸ Theme-Design > Schriften.
Da kannst du die Schriftgrößen einrichten.
Alternative ist die Verwendung von entsprechenden CSS-Regeln unter Design > Customizer > Zusätzliches CSS.
Zum Beispiel etwas in der Art:
```
.entry-content h1 {
    font-size: clamp(2rem, 0.6rem + 2vw, 3rem);
}
```
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.

Viele Grüße
Hans-Gerd
Thread-Starter dennis600
(@dennis600)

vor 1 Jahr, 6 Monaten

Danke für deine weitere Hilfe.

Ich kann die Schriftgrößen allerdings nur allgemein einrichten. Die große Schrift sieht auf einem großen Bildschirm gut aus, aber auf dem Smartphone ist die leider zu groß. Eine extra Einstellung für den Mobile-Bereich habe ich nicht.

Aber das wäre was, was man mit einer CSS-Regeln machen könnte? Sprich man könnte auch auf die 980px reagieren und entsprechend die Schriftgröße automatisch ändern lassen?

Danke noch für die Links. Wenn ich mit meiner Annahme recht habe, muss ich schauen dass ich Zeit finde und mich in CSS einarbeite.

Viele Grüße!

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 6 Monaten

Hallo @dennis600

Aber das wäre was, was man mit einer CSS-Regeln machen könnte?

in der Tat. Darum hatte ich dir ja die entsprechende CSS-Regel genannt.

Der folgende kurze Beitrag erläutert, wie mit clamp die Schriftgröße automatisch angepasst werden kann.

Viele Grüße
Hans-Gerd

Thread-Starter dennis600
(@dennis600)

vor 1 Jahr, 6 Monaten

Super, vielen Dank.
Ich muss mich erst noch in CSS einlesen, damit ich die Regel verstehe, deswegen die Nachfrage.
Dann bin ich erst mal beschäftigt.

Vielen Dank noch einmal für die schnelle Hilfe.

Viele Grüße!

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Das Thema „Skallierung von PC-Bildschirm zu Smartphone stimmt nicht“ ist für neue Antworten geschlossen.

Ansichten