• Gelöst altobl

    (@altobl)


    Hallo Zusammen,

    Ich habe das Problem auf meiner Webiste, dass ich auf meinen Seiten sehr gerne Spalten benutze. Nun habe ich aber gemerkt, dass wenn sich die Spalten aufeinanderstapeln, sich die Reihenfolge ändert. Damit das Design auf dem Desktop aber ansprechend bleibt kann ich diese Spaltenreihenfolge nicht einfach ändern.

    Hier ein Bild der Desktop-Seite:

    Wie ihr seht wechseln sich Text und Bild immer ab.

    Auf Mobilgeräten sieht das aber so aus:

    Die Gesichter sind absichtlich durchgestrichen.

    Gibt es eine Möglichkeit, wie ich die Stapelreihenfolge auf Mobilgeräten anpassen kann, damit der Titel auch oberhalb des Inhaltes ist und nicht unterhalb?

    Ich habe mich bereits einmal erkundigt und herausgefunden dass man eine CSS anpassung machen kann. Ich habe das aber nicht verstanden und weiss nicht, ob ich dann für jede seite einzeln sagen kann, welche spalte oben ist im Stapel.

    Vielen Dank schon im Vorab für eure Hilfe!

    LG

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

Ansicht von 5 Antworten – 1 bis 5 (von insgesamt 5)
  • Die Gesichter sind absichtlich durchgestrichen.

    Dann musst du sie aber auch auf der Webseite durchstreichen. 😀 😀 😀

    Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.

    Thread-Starter altobl

    (@altobl)

    Guten Morgen,

    Ich habe die Bilder nur hier durchgestrichen wegen den Bildrechten. Ich darf die Bilder auf keinen externen Seiten veröffentlichen. Also zumindest die durchgestrichenen.

    Hier der Bericht den du Brauchst:



    ` wp-core

    version: 6.7.1
    site_language: de_CH_informal
    user_language: de_CH_informal
    timezone: Europe/Zurich
    permalink: /blog/%year%/%monthnum%/%day%/%postname%/
    https_status: true
    multisite: true
    user_registration: true
    blog_public: 1
    default_comment_status: undefined
    environment_type: production
    site_id: 1
    site_count: 4
    network_count: 1
    user_count: 1
    dotorg_communication: true wp-dropins (2)

    advanced-cache.php: true
    object-cache.php: true wp-active-theme

    name: Twenty Twenty-Four (twentytwentyfour)
    version: 1.3
    author: the WordPress team
    author_website: https://wordpress.org
    parent_theme: none
    theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, widgets-block-editor, block-templates
    theme_path: /home/icukawop/www/arrowforfuture.ch/wp-content/themes/twentytwentyfour
    auto_update: Deaktiviert wp-themes-inactive (2)

    Twenty Twenty-Five: version: 1.0, author: the WordPress team, Automatische Aktualisierungen deaktiviert
    Twenty Twenty-Three: version: 1.6, author: WordPress-Team, Automatische Aktualisierungen deaktiviert wp-mu-plugins (2)

    burst_rest_api_optimizer.php: author: (undefined), version: (undefined)
    Domain Mapping System Helper: version: 1.0.0, author: Gaucho Plugins wp-plugins-active (10)

    Auto Focus Keyword for SEO: version: 1.0.2, author: Pagup, Automatische Aktualisierungen deaktiviert
    Broken Link Checker: version: 2.4.2, author: WPMU DEV, Automatische Aktualisierungen deaktiviert
    Burst Statistics - Privacy-Friendly Analytics for WordPress: version: 1.7.4, author: Burst Statistics - Stats & Analytics for WordPress, Automatische Aktualisierungen deaktiviert
    Complianz | GDPR/CCPA Cookie Consent: version: 7.2.0, author: Really Simple Plugins, Automatische Aktualisierungen deaktiviert
    Forminator: version: 1.38.3, author: WPMU DEV, Automatische Aktualisierungen deaktiviert
    Rank Math SEO: version: 1.0.236, author: Rank Math SEO, Automatische Aktualisierungen deaktiviert
    Real Media Library (Free): version: 4.22.28, author: devowl.io, Automatische Aktualisierungen deaktiviert
    Redirect Redirection: version: 1.2.5, author: Inisev, Automatische Aktualisierungen deaktiviert
    Solid Security Basic: version: 9.3.6, author: SolidWP, Automatische Aktualisierungen deaktiviert
    W3 Total Cache: version: 2.8.3, author: BoldGrid, Automatische Aktualisierungen deaktiviert wp-plugins-inactive (9)

    CleverReach® WP: version: 1.5.20, author: CleverReach GmbH & Co. KG, Automatische Aktualisierungen deaktiviert
    Countdown Block: version: 1.2.8, author: WPDeveloper, Automatische Aktualisierungen deaktiviert
    Events Manager: version: 6.6.3, author: Pixelite, Automatische Aktualisierungen deaktiviert
    FluentSMTP: version: 2.2.83, author: FluentSMTP & WPManageNinja Team, Automatische Aktualisierungen deaktiviert
    hCaptcha for WP: version: 4.9.0, author: hCaptcha, Automatische Aktualisierungen deaktiviert
    MailPoet: version: 5.6.2, author: MailPoet, Automatische Aktualisierungen deaktiviert
    Newsletter, SMTP, Email marketing and Subscribe forms by Brevo: version: 3.1.92, author: Brevo, Automatische Aktualisierungen deaktiviert
    Rs Christmas Trees: version: 1.0.1, author: khorshed Alam, Automatische Aktualisierungen deaktiviert
    WebToffee WP Backup and Migration: version: 1.5.4, author: WebToffee, Automatische Aktualisierungen deaktiviert wp-media

    image_editor: WP_Image_Editor_Imagick
    imagick_module_version: 1809
    imagemagick_version: ImageMagick 7.1.1-26 Q16-HDRI amd64 21914 https://imagemagick.org
    imagick_version: 3.7.0
    file_uploads: 1
    post_max_size: 64M
    upload_max_filesize: 64M
    max_effective_size: 64 MB
    max_file_uploads: 20
    imagick_limits:
    imagick::RESOURCETYPE_AREA: 990 GB
    imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
    imagick::RESOURCETYPE_FILE: 1536
    imagick::RESOURCETYPE_MAP: 495 GB
    imagick::RESOURCETYPE_MEMORY: 247 GB
    imagick::RESOURCETYPE_THREAD: 1
    imagick::RESOURCETYPE_TIME: 0
    imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, ASHLAR, AVI, AVIF, AVS, BAYER, BAYERA, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUBE, CUR, CUT, DATA, DCM, DCR, DCRAW, DCX, DDS, DFONT, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FARBFELD, FAX, FF, FILE, FITS, FL32, FLV, FRACTAL, FTP, FTS, FTXT, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, HALD, HDR, HEIC, HEIF, 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, JXL, K25, KDC, KERNEL, LABEL, M2V, M4V, MAC, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MPO, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORA, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PHM, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, QOI, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGB565, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, STRIMG, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TM2, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMF, WMV, WMZ, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, YAML, YCbCr, YCbCrA, YUV
    gd_version: 2.3.3
    gd_formats: GIF, JPEG, PNG, WebP, BMP, AVIF, XPM
    ghostscript_version: 10.03.1 wp-server

    server_architecture: FreeBSD 13.4-RELEASE-p2 amd64
    httpd_software: Apache
    php_version: 8.1.31 64bit
    php_sapi: cgi-fcgi
    max_input_variables: 1000
    time_limit: 30
    memory_limit: 256M
    max_input_time: 60
    upload_max_filesize: 64M
    php_post_max_size: 64M
    curl_version: 8.10.1 OpenSSL/1.1.1w
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: true
    current: 2025-01-23T06:22:29+00:00
    utc-time: Thursday, 23-Jan-25 06:22:29 UTC
    server-time: 2025-01-23T07:22:27+01:00 wp-database

    extension: mysqli
    server_version: 10.6.19-MariaDB-log
    client_version: mysqlnd 8.1.31
    max_allowed_packet: 67108864
    max_connections: 400 wp-constants

    WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /home/icukawop/www/arrowforfuture.ch/wp-content
    WP_PLUGIN_DIR: /home/icukawop/www/arrowforfuture.ch/wp-content/plugins
    WP_MEMORY_LIMIT: 64M
    WP_MAX_MEMORY_LIMIT: 256M
    WP_DEBUG: false
    WP_DEBUG_DISPLAY: true
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: true
    CONCATENATE_SCRIPTS: undefined
    COMPRESS_SCRIPTS: undefined
    COMPRESS_CSS: undefined
    WP_ENVIRONMENT_TYPE: undefined
    WP_DEVELOPMENT_MODE: undefined
    DB_CHARSET: utf8mb4
    DB_COLLATE: undefined wp-filesystem

    wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    fonts: writable
    mu-plugins: writable solid-security

    pro: free
    initial_build: 4128
    activated: 2025-01-22 19:24:41
    patchstack: false
    modules:
    0: ban-users
    1: firewall
    2: brute-force
    3: network-brute-force
    4: backup
    5: security-check-pro
    6: malware-scheduling
    7: two-factor
    settings: {"firewall":{"max_attempts_host":10,"check_period":30},"backup":{"enabled":false,"interval":3,"method":"email","retain":0,"zip":true,"exclude":6},"two-factor":{"available_methods":"all","custom_available_methods":["Two_Factor_Totp","Two_Factor_Email","Two_Factor_Backup_Codes"],"disable_first_login":false},"global":{"write_files":true,"lockout_period":15,"blacklist_period":7,"blacklist":true,"blacklist_count":3,"automatic_temp_auth":true,"lockout_white_list":0,"log_type":"database","proxy":"automatic","proxy_header":"HTTP_X_FORWARDED_FOR","hide_admin_bar":false},"system-tweaks":{"protect_files":true,"directory_browsing":true,"uploads_php":true,"plugins_php":true,"themes_php":true},"wordpress-tweaks":{"file_editor":true,"disable_xmlrpc":"enable","allow_xmlrpc_multiauth":false,"rest_api":"default-access","valid_user_login_type":"both","force_unique_nicename":false,"disable_unused_author_pages":false},"hide-backend":{"enabled":false}}
    patchstack-firewall-rules: undefined
    user-firewall-rules: undefined
    total-backups: undefined
    active-vulnerabilities: 0
    patched-vulnerabilities: 0
    two-factor-users: undefined
    user_groups: [{"roles":[],"canonical":["contributor"],"users":0,"settings":[]},{"roles":[],"canonical":["editor"],"users":0,"settings":[]},{"roles":[],"canonical":["subscriber"],"users":0,"settings":[]},{"roles":["css_js_designer"],"canonical":["administrator"],"users":0,"settings":[]},{"roles":[],"canonical":["author"],"users":0,"settings":[]}]

    Hallo,
    ich habe das nicht so ganz verstanden, daher die Nachfrage: Soll z. B. die Spalte mit dem Bild und dem Titel „Arrow for future“ mobil vor dem Text in der Spalte „Über uns“ kommen?

    In dem Fall muss die Reihenfolge der Spalten mobil geändert werden. Das ist über Bordmittel beim Block Editor – so weit ich das sehe – nicht möglich, sondern nur per CSS.

    Bei Block Themes wie z. B. Twenty Twenty-Four kannst du über Design > Website-Editor zusätzliches CSS eingeben.
    Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):

    Screenshot Einstellungen

    Dazu musst du bei den betreffenden Spalten-Blöcken unter „Erweitert“ bei „zusätzliche CSS-Klasse(n) die Klasse „spaltenumkehrung“ eintragen.

    Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):

    Spalten-Einstellungen

    Füge bitte die folgende CSS-Regel unter Design > Customizer > Zusätzliches CSS am Ende ein und teste dann bitte, ob es funktioniert:

    @media (max-width: 781px) {
        .spaltenumkehrung {
            flex-direction: column-reverse;
        }
    }

    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde vor 9 Monaten, 3 Wochen von Hans-Gerd Gerhards geändert. Grund: Ergänzung
    Thread-Starter altobl

    (@altobl)

    Soll z. B. die Spalte mit dem Bild und dem Titel „Arrow for future“ mobil vor dem Text in der Spalte „Über uns“ kommen?

    Also die Spalte mit dem Schriftzug uf der Betonmauer soll nach der Spalte Vereinsvorstand kommen, etc.

    Dein Vorschlag hat funktioniert! Vielen Dank für deine Hilfe und alles Gute!

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

Ansicht von 5 Antworten – 1 bis 5 (von insgesamt 5)

Das Thema „Stapelreihenfolge von Spalten auf Mobilgeräten beeinflussen“ ist für neue Antworten geschlossen.