Support » Allgemeine Fragen » Wie löse ich dieses Responsive-Problem? …

  • Hallo
    Auf der Website turan-treuhand.ch funktioniert das Parallax-Foto (es ist nur eines) auf Desktop und Laptop problemlos – von unten bis oben.

    Auf Tablets und Smartphones werden die Fotos gesplittet und z.T. mehrfach abgebildet. Oder man sieht nur eine graue Fläche aus dem Fotohintergrund.

    Gebaut ist die Website mit dem Editor-Plugin OnePager auf Twenty Seventeen.

    Frage: Wo und wie genau löse ich das?

    Herzlichen Dank für jede Hilfe!!!

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

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)
  • Bekommen wir auch noch den Website-Bericht? 🙂

    Geh bitte auf Werkzeuge > Website-Zustand > Bericht, klick auf den Button und füge den Bericht mit Strg-V unverändert in deine Antwort ein.

    Thread-Starter merlinausz

    (@merlinausz)

    Danke für den Hinweis.

    Den Pfad Werkzeuge > Website-Zustand > Bericht habe ich nicht. Meinst du mit Website-Bericht den für mich verfügbaren Pfad Werkzeuge > Daten exportieren?

    Der Export (xml-Datei) enthält dann alle Beiträge, Seiten, Kommentare, Benutzerdefinierte Felder, Kategorien, Schlagwörter, Navigationsmenüs und Individuelle Inhaltstypen.

    Vielen Dank für deine Rückmeldung.

    Wenn dir das Menü nicht angezeigt wird, bist du wahrscheinlich nicht als Administrator angemeldet.

    Ich vermute, dass das Onepager-Plugin die fehlerhafte Darstellung verursacht. Du kannst versuchen, das durch eine eigene CSS-Regel zu beheben, z.B.

    @media handheld, only screen and (max-width: 479px) {
      #buchhaltung, #steuern, #about, #contact, #titel {
        background-repeat: no-repeat;
      }
    }

    oder du verzichtest auf dieses Plugin. Das Theme Twenty Seventenn kommt eigentlich ganz gut ohne das Plugin aus.

    Hallo,
    wenn ich das richtig sehe, ist deine WordPress-Version 5.1.15 und damit ziemlich veraltet.
    Evtl. reicht es ja schon, wenn du WordPress (nach einer Sicherung) updatest.
    Viele Grüße
    Hans-Gerd

    Dass dir das Menü für den Website-Bericht nicht angezeigt wird, hat mit der reichlich veralteten WordPress-Version 5.1 vom Februar 2019 zu tun, die du einsetzt. Gestern ist WordPress 6.1 herausgekommen. Mach doch mal ein Update. (Vorher ein Backup machen.)


    Hans-Gerd war satte 24 Sekunden schneller als ich. 🙈

    Thread-Starter merlinausz

    (@merlinausz)

    Danke für den Lösungsverschlag.

    Ich habe das so in Customizer > Zusätzliches CSS kopiert – hat aber nicht den gewünschten Effekt. Möglich, dass das an OnePager liegt, vielleicht aber auch am Foto-Format von 2500 x 1667 px. Twenty Seventeen arbeitet im Originaltemplate mit 2000 x 1200 px. Hat das einen Einfluss?

    Danke für deine Meinung.

    Nachtrag:
    Hierbei handelt es sich um das Plugin Onepage Builder – Easiest Landing Page Builder For WordPress, das lt. Meldung bis WordPress Version 5.3.14 getestet und seit 2 Jahren nicht mehr aktualisiert wurde.

    Insofern sehe ich das genauso wie Bego: Du solltest das Plugin (schon aus Sicherheitsgründen) nicht mehr nutzen.

    Ich habe das so in Customizer > Zusätzliches CSS kopiert

    … und auch veröffentlicht? Ggf. Cache gelöscht? Ich finde den Eintrag nicht.

    Vielleicht reicht es aber auch schon, wenn du in deinen eigenen CSS-Regeln bei

    @media handheld, only screen and (max-width: 479px) {
      #buchhaltung, #steuern, #about, #contact, #titel {
        /* background-size: 100% !important; */
        background-position: center center;
        height: 200px;
    }
    }

    die background-size-Angaben auskommentierst.

    Thread-Starter merlinausz

    (@merlinausz)

    Danke an Bego und Hans-Gerd.

    Ich habe Wp auf 6.1 aktualisiert und den Code von Bego in „Zusätzliches CSS“ eingesetzt und veröffentlicht. Ohne Effekt.

    Kürzlich habe ich auch das Builder-Plugin OnePager von 1.2.8.1 auf 2.4.1 aktualisiert, worauf die gesamte Website gecrasht ist. Nach dem Backup arbeite ich jetzt wieder auf der alten Version.

    Die Empfehlung lautet also, den OnePager zu löschen (bzw. auszuschalten).

    Frage 1: Was geschieht denn mit der Darstellung der Website, wenn ich das mache, indem ich den OnePager auf „Disable“ stelle?

    Frage 2: Könnte ich den OnePager auch wieder auf „Enable“ stellen und alles wäre wie vorher? Was ich aber vermutlich nicht mehr machen würde.

    Kürzlich habe ich auch das Builder-Plugin OnePager von 1.2.8.1 auf 2.4.1 aktualisiert, worauf die gesamte Website gecrasht ist. Nach dem Backup arbeite ich jetzt wieder auf der alten Version.

    Da ist ja gründlich was schief gelaufen. Statt nach der Ursache zu forschen, wieso die neue Version die Website zum Absturz bringt, machst du ein Downgrade auf eine uralte Version, die wahrscheinlich auch diverse Bugs enthält – für irgendwas muss das angebotene Update ja gut gewesen sein?

    Wie es sich auswirkt, wenn du das Plugin deaktivierst, kann ich nicht sagen. Mach ein Backup und probier es aus.

    Zu meinem letzten Vorschlag, die eigene CSS-Regel abzuändern, hast du nichts geschrieben. Probiere das doch mal aus.

    Wenn du jetzt WordPress 6.1 installiert hast, steht ja auch dem Teilen des Website-Berichts nichts mehr im Weg? 🙂

    Thread-Starter merlinausz

    (@merlinausz)

    Danke für dein Nachhaken, Bego.

    Das Problem war, dass exakt nach diesem Update die Website gecrasht hat. Die Website wurde auf den ursprünglichen „Hello World“-Zustand des Templates zurückgesetzt.

    Deinen nachstehenden Code habe ich in „Zusätzliches CSS“ kopiert, was aber keinen Effekt hatte.

    @media handheld, only screen and (max-width: 479px) {
      #buchhaltung, #steuern, #about, #contact, #titel {
        /* background-size: 100% !important; */
        background-position: center center;
        height: 200px;
    }
    }

    Weiter unten folgt der Website-Zustandsbericht aus „Werkzeuge“.

    Hilft das weiter?

    ### wp-core ###
    
    version: 6.1
    site_language: de_DE
    user_language: de_DE
    timezone: +00:00
    permalink: /%postname%/
    https_status: true
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 3
    dotorg_communication: true
    
    ### wp-paths-sizes ###
    
    wordpress_path: /home/httpd/vhosts/sircalik.com/httpsdocs/turan-treuhand.ch
    wordpress_size: 133,55 MB (140035725 bytes)
    uploads_path: /home/httpd/vhosts/sircalik.com/httpsdocs/turan-treuhand.ch/wp-content/uploads
    uploads_size: 5,18 MB (5430141 bytes)
    themes_path: /home/httpd/vhosts/sircalik.com/httpsdocs/turan-treuhand.ch/wp-content/themes
    themes_size: 14,56 MB (15265245 bytes)
    plugins_path: /home/httpd/vhosts/sircalik.com/httpsdocs/turan-treuhand.ch/wp-content/plugins
    plugins_size: 61,24 MB (64216099 bytes)
    database_size: 2,61 MB (2736128 bytes)
    total_size: 217,14 MB (227683338 bytes)
    
    ### wp-dropins (1) ###
    
    maintenance.php: true
    
    ### wp-active-theme ###
    
    name: Twenty Seventeen (twentyseventeen)
    version: 2.1 (latest version: 3.1)
    author: WordPress-Team
    author_website: https://de.wordpress.org/
    parent_theme: none
    theme_features: core-block-patterns, widgets-block-editor, automatic-feed-links, title-tag, post-thumbnails, menus, html5, post-formats, custom-logo, customize-selective-refresh-widgets, editor-style, editor-styles, wp-block-styles, responsive-embeds, starter-content, custom-header, widgets
    theme_path: /home/httpd/vhosts/sircalik.com/httpsdocs/turan-treuhand.ch/wp-content/themes/twentyseventeen
    auto_update: Deaktiviert
    
    ### wp-themes-inactive (4) ###
    
    Twenty Nineteen: version: 1.3, author: WordPress-Team (latest version: 2.4), Automatische Aktualisierungen deaktiviert
    Twenty Twenty-One: version: 1.6, author: WordPress-Team (latest version: 1.7), Automatische Aktualisierungen deaktiviert
    Twenty Twenty-Three: version: 1.0, author: the WordPress team, Automatische Aktualisierungen deaktiviert
    Twenty Twenty-Two: version: 1.3, author: WordPress-Team, Automatische Aktualisierungen deaktiviert
    
    ### wp-plugins-active (10) ###
    
    Akismet Anti-Spam: version: 5.0.1, author: Automattic, Automatische Aktualisierungen deaktiviert
    Classic Editor: version: 1.6.2, author: WordPress Contributors, Automatische Aktualisierungen deaktiviert
    Duplicate Page: version: 4.4.9, author: mndpsingh287, Automatische Aktualisierungen deaktiviert
    Lazy Load - Optimize Images: version: 2.3.6, author: WP Rocket, Automatische Aktualisierungen deaktiviert
    Limit Login Attempts Reloaded: version: 2.7.4, author: WPChef (latest version: 2.25.8), Automatische Aktualisierungen deaktiviert
    Ninja Forms: version: 3.4.5, author: The WP Ninjas (latest version: 3.6.14), Automatische Aktualisierungen deaktiviert
    Onepager - One Page Builder: version: 1.2.8.1, author: ThemeXpert (latest version: 2.4.1), Automatische Aktualisierungen deaktiviert
    Simple Custom CSS: version: 4.0.6, author: John Regan, Automatische Aktualisierungen deaktiviert
    Smush: version: 3.2.0.1, author: WPMU DEV (latest version: 3.12.3), Automatische Aktualisierungen deaktiviert
    Yoast SEO: version: 10.0.1, author: Team Yoast (latest version: 19.9), Automatische Aktualisierungen deaktiviert
    
    ### wp-plugins-inactive (2) ###
    
    Coming Soon Page, Maintenance Mode, Landing Pages & WordPress Website Builder by SeedProd: version: 6.15.4, author: SeedProd, Automatische Aktualisierungen deaktiviert
    Hummingbird: version: 1.9.4.1, author: WPMU DEV (latest version: 3.3.4), Automatische Aktualisierungen deaktiviert
    
    ### wp-media ###
    
    image_editor: WP_Image_Editor_Imagick
    imagick_module_version: 1692
    imagemagick_version: ImageMagick 6.9.12-64 Q16 x86_64 17467 https://legacy.imagemagick.org
    imagick_version: 3.7.0
    file_uploads: File uploads is turned off
    post_max_size: 256M
    upload_max_filesize: 256M
    max_effective_size: 256 MB
    max_file_uploads: 100
    imagick_limits: 
    	imagick::RESOURCETYPE_AREA: 126 GB
    	imagick::RESOURCETYPE_DISK: 9.22337203685E+18
    	imagick::RESOURCETYPE_FILE: 6144
    	imagick::RESOURCETYPE_MAP: 126 GB
    	imagick::RESOURCETYPE_MEMORY: 63 GB
    	imagick::RESOURCETYPE_THREAD: 1
    imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, 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, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, 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, POCKETMOD, 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, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
    gd_version: 2.3.3
    gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
    ghostscript_version: 9.25
    
    ### wp-server ###
    
    server_architecture: Linux 3.10.0-1160.76.1.el7.x86_64 x86_64
    httpd_software: Apache
    php_version: 7.4.33 64bit
    php_sapi: fpm-fcgi
    max_input_variables: 200000
    time_limit: 60
    memory_limit: 256M
    max_input_time: 60
    upload_max_filesize: 256M
    php_post_max_size: 256M
    curl_version: 7.29.0 NSS/3.53.1
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: true
    
    ### wp-database ###
    
    extension: mysqli
    server_version: 10.3.36-MariaDB
    client_version: mysqlnd 7.4.33
    max_allowed_packet: 1073741824
    max_connections: 500
    
    ### wp-constants ###
    
    WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /home/httpd/vhosts/sircalik.com/httpsdocs/turan-treuhand.ch/wp-content
    WP_PLUGIN_DIR: /home/httpd/vhosts/sircalik.com/httpsdocs/turan-treuhand.ch/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    WP_MAX_MEMORY_LIMIT: 256M
    WP_DEBUG: false
    WP_DEBUG_DISPLAY: true
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: false
    CONCATENATE_SCRIPTS: false
    COMPRESS_SCRIPTS: undefined
    COMPRESS_CSS: undefined
    WP_ENVIRONMENT_TYPE: Nicht definiert
    DB_CHARSET: utf8
    DB_COLLATE: undefined
    
    ### wp-filesystem ###
    
    wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    
    
    • Diese Antwort wurde geändert vor 1 Jahr, 7 Monaten von Hans-Gerd Gerhards. Grund: Korrektur Code

    Deinen nachstehenden Code habe ich in „Zusätzliches CSS“ kopiert, was aber keinen Effekt hatte.

    Du hast ein merkwürdiges Verständnis von Auskommentieren von Code-Zeilen. 🙂

    Nehmen wir an, du hast eine CSS-Regel

    p {
      color: red;
      text-decoration: underline;
    }

    Du möchtest nun nicht mehr, dass Absätze rot ausgegeben werden. Dazu kannst du die Zeile auskommentieren. Der selbe Code sieht dann so aus:

    p {
      /* color: red; */
      text-decoration: underline;
    }

    Diesen Code zu kopieren und anzuhängen bringt hingegen gar nichts, weil die CSS-Regel color: red; durch eine Zeile mit Kommentar nicht überschrieben wird.

    Eigentlich möchten wir hier keine Grundlagen vermitteln, weil sowas völlig den Rahmen eines kostenlosen Support sprengt.

    Das Plugin Simple Custom CSS haben wir lange Zeit hier empfohlen, als der Customizer noch keine Möglichkeit angeboten hat, eigene CSS-Regeln hinzuzufügen. Inzwischen würde ich auf das Plugin verzichten* – also vorher die CSS-Regeln dort kopieren und im Customizer unter Zusätzliches CSS eintragen, dann erst das Plugin deaktivieren.

    (* für Nutzer, die schon die neuen, blockbasierten Themes nutzen, kann das wieder interessant sein, weil sie keinen Zugriff auf den Customizer haben.)

    Thread-Starter merlinausz

    (@merlinausz)

    Danke, Bego. Ich werde mir deinen Input näher ansehen.

    Apropos CSS-Code:

    Macht es einen Unterschied, ob ich CSS Code unter
    – Design > Benutzerdefiniertes CSS
    – Design > Customizer > Simple Custom CSS
    – Design > Customizer > Zusätzliches CSS
    einsetze?

    Nach welchen Kriterien wählt man zwischen diesen 3 Möglichekeiten aus?

    Liest du meine Antworten eigentlich?

    Thread-Starter merlinausz

    (@merlinausz)

    Klar, Bego, ich lese generell immer alle Antworten.

    Wenn ich einen Hinweis nicht richtig umsetze, liegt’s einfach am Mangel an technischen WP-Wissen. 😉

    Oder warum fragst du? Habe ich was übersehen?

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)
  • Das Thema „Wie löse ich dieses Responsive-Problem? …“ ist für neue Antworten geschlossen.