Support » Allgemeine Fragen » Skallierung von PC-Bildschirm zu Smartphone stimmt nicht

  • Gelöst dennis600

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

    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!

    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)

    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!

    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)

    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)