Support » Allgemeine Fragen » Medien Tag in die CSS Datei einfügen

  • Gelöst gesundegeschenke

    (@gesundegeschenke)


    Ich habe ein Problem mit der Darstellung meiner Startseite. Dort sollten 4 Spalten mit Kategorien angezeigt werden, es sind aber nur 2, wie mobil.

    Ich habe jetzt eine Information bekommen, wie ich das beheben kann. Siehe email unten.
    Wenn ich nach dieser Datei suche, finde ich sie auch in …woocommerce/assets/css.

    Was soll ich damit jetzt machen?

    „RapidLoad team debugged the issue in your site and found out that the media tag(https://c0.wp.com/p/woocommerce/6.8.2/assets/css/woocommerce-smallscreen.css) was out of the CSS file(See Screenshot). This CSS file is loaded for both desktop and mobile. As this is used out of CSS file RapidLoads‘ Critical CSS cannot identify to which screen size this should be served because the media query is not written inside the CSS file. So RapidLoad serves it to both screen sizes.

    In order to resolve this, you will have to include the media tag inside the CSS file.

    So we suggest you contact your site developer and tell him to include the media tag in the CSS file.“

    
    ### wp-core ###
    
    version: 6.0.1
    site_language: de_DE
    user_language: de_DE
    timezone: Europe/Berlin
    permalink: /%postname%/
    https_status: true
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 5
    dotorg_communication: true
    
    ### wp-paths-sizes ###
    
    wordpress_path: /home/www/wordpress2
    wordpress_size: loading...
    uploads_path: /home/www/wordpress2/wp-content/uploads
    uploads_size: loading...
    themes_path: /home/www/wordpress2/wp-content/themes
    themes_size: loading...
    plugins_path: /home/www/wordpress2/wp-content/plugins
    plugins_size: loading...
    database_size: loading...
    total_size: loading...
    
    ### wp-dropins (1) ###
    
    advanced-cache.php: true
    
    ### wp-active-theme ###
    
    name: ShoppingCart (shoppingcart)
    version: 1.2.0
    author: Theme Freesia
    author_website: https://themefreesia.com
    parent_theme: none
    theme_features: core-block-patterns, widgets-block-editor, post-thumbnails, automatic-feed-links, title-tag, menus, custom-logo, gutenberg, align-wide, responsive-embeds, customize-selective-refresh-widgets, html5, post-formats, custom-background, editor-style, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, custom-header, widgets
    theme_path: /home/www/wordpress2/wp-content/themes/shoppingcart
    auto_update: Aktiviert
    
    ### wp-themes-inactive (1) ###
    
    Twenty Sixteen: version: 2.7, author: WordPress-Team, Automatische Aktualisierungen deaktiviert
    
    ### wp-mu-plugins (1) ###
    
    WP STAGING Optimizer: version: 1.5.1, author: René Hermenau
    
    ### wp-plugins-active (26) ###
    
    Affiliate Power: version: 2.3.0, author: Jonas Breuer, Automatische Aktualisierungen deaktiviert
    Auto Image Attributes From Filename With Bulk Updater: version: 3.2, author: Arun Basil Lal, Automatische Aktualisierungen deaktiviert
    Backup Duplicator & Migration - WP STAGING: version: 2.9.18, author: WP-STAGING, WPStagingBackup, Automatische Aktualisierungen deaktiviert
    Code Snippets: version: 3.2.0, author: Code Snippets Pro, Automatische Aktualisierungen deaktiviert
    Complianz - Terms and Conditions: version: 1.1.1, author: Really Simple Plugins, Automatische Aktualisierungen deaktiviert
    Complianz | GDPR/CCPA Cookie Consent: version: 6.3.1, author: Really Simple Plugins, Automatische Aktualisierungen deaktiviert
    Jetpack: version: 11.2, author: Automattic, Automatische Aktualisierungen deaktiviert
    Jetpack Boost: version: 1.5.1, author: Automattic - Website Speed and Performance team, Automatische Aktualisierungen deaktiviert
    Manually Approved Reviews for WooCommerce: version: 1.2, author: Tim Eckel, Automatische Aktualisierungen deaktiviert
    Matomo Analytics - Ethical Stats. Powerful Insights.: version: 4.11.0, author: Matomo, Automatische Aktualisierungen deaktiviert
    Media File Renamer: version: 5.4.4, author: Jordy Meow, Automatische Aktualisierungen deaktiviert
    Optimus: version: 1.6.2, author: KeyCDN, Automatische Aktualisierungen deaktiviert
    RapidLoad Power-Up for Autoptimize: version: 1.6.26, author: RapidLoad, Automatische Aktualisierungen deaktiviert
    Responsive Sidebar: version: 1.2.2, author: Processby, Automatische Aktualisierungen deaktiviert
    Schema & Structured Data for WP & AMP: version: 1.9.100, author: Magazine3, Automatische Aktualisierungen deaktiviert
    Spectra: version: 2.0.6, author: Brainstorm Force, Automatische Aktualisierungen deaktiviert
    Temporary Login Without Password: version: 1.7.5, author: StoreApps, Automatische Aktualisierungen deaktiviert
    UpdraftPlus - Backup/Restore: version: 1.22.17, author: UpdraftPlus.Com, DavidAnderson, Automatische Aktualisierungen deaktiviert
    WooCommerce: version: 6.8.2, author: Automattic, Automatische Aktualisierungen deaktiviert
    WPCode - Insert Headers, Footers, and Code Snippets: version: 2.0.2, author: WPCode, Automatische Aktualisierungen deaktiviert
    WP File Manager: version: 7.1.6, author: mndpsingh287, Automatische Aktualisierungen deaktiviert
    WP Rocket: version: 3.11.5, author: WP Media, Automatische Aktualisierungen deaktiviert
    WP Rocket | Change Remove Unused CSS Parameters: author: WP Rocket Support Team, version: (undefined), Automatische Aktualisierungen deaktiviert
    WPS Hide Login: version: 1.9.6, author: WPServeur, NicolasKulka, wpformation, Automatische Aktualisierungen deaktiviert
    wpShopGermany - IT-Recht Kanzlei: version: 1.6, author: maennchen1.de, Automatische Aktualisierungen deaktiviert
    Yoast SEO: version: 19.6, author: Team Yoast, Automatische Aktualisierungen deaktiviert
    
    ### wp-plugins-inactive (6) ###
    
    Autoptimize: version: 3.1.1.1, author: Frank Goossens (futtta), Automatische Aktualisierungen deaktiviert
    EWWW Image Optimizer: version: 6.7.0, author: Exactly WWW, Automatische Aktualisierungen deaktiviert
    GP Back To Top: version: 3.0, author: Mai Dong Giang (Peter Mai), Automatische Aktualisierungen deaktiviert
    Minimal Coming Soon & Maintenance Mode: version: 2.35, author: WebFactory Ltd, Automatische Aktualisierungen deaktiviert
    PWA — simple way to Progressive Web App: version: 1.5.0, author: Marcin Pietrzak, Automatische Aktualisierungen deaktiviert
    Super Progressive Web Apps: version: 2.2.6, author: SuperPWA, Automatische Aktualisierungen deaktiviert
    
    ### code-snippets (18) ###
    
    snippet-1: name: Beispiel HTML Shortcode, scope: global, modified: 2022-04-21 18:22:44, tags: [shortcode]
    snippet-2: name: Beispiel CSS Snippet , scope: front-end, modified: 2022-04-21 18:22:44, tags: [css]
    snippet-3: name: Beispiel JavaScript Snippet, scope: front-end, modified: 2022-04-21 18:22:44, tags: [javascript]
    snippet-4: name: Schnipsel nach Namen sortieren, scope: admin, modified: 2022-04-21 18:22:44, tags: [code-snippets-plugin]
    snippet-5: name: Reihe die Snippets nach Datum, scope: admin, modified: 2022-04-21 18:22:44, tags: [code-snippets-plugin]
    snippet-6: name: Produktzähler in Kategorien entfernen, scope: global, modified: 2022-04-21 18:39:02
    snippet-8: name: Produktbild Link zum Partnershop, scope: global, modified: 2022-07-03 11:23:41
    snippet-9: name: produktbild weiterleitung partnershop, scope: global, modified: 2022-07-03 11:36:36
    snippet-10: name: Revisionen deaktivieren, scope: global, modified: 2022-08-07 17:36:52
    snippet-11: name: No self pingbacks, scope: global, modified: 2022-08-08 15:17:30
    snippet-12: name: remove font awesome from wp, scope: global, modified: 2022-08-09 10:36:17
    snippet-13: name: webe remove fontawesome, scope: global, modified: 2022-08-09 12:41:10
    snippet-14: name: kein fontawesome in shoppingcart, scope: global, modified: 2022-08-09 12:59:52
    snippet-15: name: shoppingcart styles deregister, scope: global, modified: 2022-08-11 17:05:09
    snippet-16: name: shoppingcart dequeue styles, scope: global, modified: 2022-08-11 17:07:53
    snippet-17: name: Fontawesome entfernen, scope: global, modified: 2022-08-12 07:39:07
    snippet-18: name: roboto laut mario, scope: global, modified: 2022-08-12 07:54:11
    snippet-20: name: Fonteawesome Teil 2, scope: global, modified: 2022-08-12 08:40:18
    
    ### wp-media ###
    
    image_editor: WP_Image_Editor_Imagick
    imagick_module_version: 1687
    imagemagick_version: ImageMagick 6.9.7-4 Q16 x86_64 20170114 http://www.imagemagick.org
    imagick_version: 3.6.0
    file_uploads: File uploads is turned off
    post_max_size: 150M
    upload_max_filesize: 150M
    max_effective_size: 150 MB
    max_file_uploads: 20
    imagick_limits: 
    	imagick::RESOURCETYPE_AREA: 251 GB
    	imagick::RESOURCETYPE_DISK: 1.844674407371E+19
    	imagick::RESOURCETYPE_FILE: 768
    	imagick::RESOURCETYPE_MAP: 251 GB
    	imagick::RESOURCETYPE_MEMORY: 126 GB
    	imagick::RESOURCETYPE_THREAD: 1
    imagemagick_file_formats: 3FR, AAI, AI, ART, ARW, AVI, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DJVU, 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, 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, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, 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, VIFF, VIPS, VST, WBMP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
    gd_version: 2.2.5
    gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
    ghostscript_version: 9.26
    
    ### wp-server ###
    
    server_architecture: Linux 4.9.0-15-amd64 x86_64
    httpd_software: Apache
    php_version: 7.4.30 64bit
    php_sapi: apache2handler
    max_input_variables: 1000
    time_limit: 30
    memory_limit: 512M
    max_input_time: -1
    upload_max_filesize: 150M
    php_post_max_size: 150M
    curl_version: 7.52.1 OpenSSL/1.0.2u
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: true
    
    ### wp-database ###
    
    extension: mysqli
    server_version: 8.0.19
    client_version: mysqlnd 7.4.30
    max_allowed_packet: 134217728
    max_connections: 300
    
    ### wp-constants ###
    
    WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /home/www/wordpress2/wp-content
    WP_PLUGIN_DIR: /home/www/wordpress2/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    WP_MAX_MEMORY_LIMIT: 512M
    WP_DEBUG: false
    WP_DEBUG_DISPLAY: false
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: true
    CONCATENATE_SCRIPTS: undefined
    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
    mu-plugins: writable
    
    ### jetpack ###
    
    site_id: 197647198
    ssl_cert: No
    time_diff: undefined
    version_option: 11.2:1660386791
    old_version: 11.2:1660386791
    public: Public
    master_user: #1 chef1
    current_user: #1 chef1
    tokens_set: Blog User
    blog_token: 2LaVH3!1GJWDbfLdqBa5^hNLG)xAd!gC
    user_token: t&2M5pF9GC1o49PHOgM#nrvVu$1$i)ZS
    version: 11.2
    jp_plugin_dir: /home/www/wordpress2/wp-content/plugins/jetpack/
    plan: free
    protect_header: {"trusted_header":"REMOTE_ADDR","segments":1,"reverse":false}
    full_sync: {"started":"Mon, 15 Aug 2022 22:28:46 +0000","finished":"Mon, 15 Aug 2022 22:28:50 +0000","progress":{"options":{"finished":true},"functions":{"finished":true},"constants":{"finished":true},"users":{"total":"1","sent":1,"finished":true,"last_sent":"1"},"network_options":{"finished":true}},"config":{"options":true,"functions":true,"constants":true,"users":[1],"network_options":true}}
    sync_size: undefined
    sync_lag: 0 seconds
    full_sync_size: undefined
    full_sync_lag: 0 seconds
    idc_urls: {"home":"https:\/\/www.gesunde-geschenke.com","siteurl":"https:\/\/www.gesunde-geschenke.com","WP_HOME":"","WP_SITEURL":""}
    idc_error_option: false
    idc_optin: true
    cxn_tests: All Pass.
    
    

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

Ansicht von 1 Antwort (von insgesamt 1)
  • Der Begriff „Medien-Tag“ ist hier etwas unglücklich ausgedrückt.

    Mit so genannten „Media Queries“ kannst du bestimmte CSS-Regeln in Abhängigkeit der Bildschirmgröße (oder sogar des Ausgabemediums – Print, Screen) verwenden. Ein sehr einfaches Beispiel:

    
    <div class="box">Hello</div>
    <div class="box">World</div>
    
    <style>
      .box { 
        display: block;
        color: white;
        background: red; 
        width: 40%;
      }
      @media screen and (max-width: 599px) {
        .box {
          width: 100%;
        }
    }
    </style>

    Die Worte „Hello“ und „World“ werden in zwei Kästchen mit weißer Schrift auf rotem Hintergrund dargestellt, wobei beide Kästchen eine Breite von 40% der Bildschirmbreite einnehmen.
    Da das auf kleinen Bildschirmen mit weniger als 600 Pixeln blöd aussieht, gibt es eine Media Query, mit der eine zusätzliche CSS-Regel für Bildschirmgrößen unter 600 Pixeln greift: Die Kästchen nehmen 100% der Bildschirmbreite ein und stehen damit untereinander.

    Stylesheets von Themes und Plugins können sich schon mal in die Quere kommen. Für eine hübsche Darstellung von Produkten wird das Stylesheet des Plugins wahrscheinlich die Gestaltung des Themes überschreiben. Diese Regel kannst du aber mit einer eigenen CSS-Regel überschreiben, die du im Customizer unter Zusätzliches CSS einträgst. Sinngemäß sowas wie

    @media screen and (max-width: 768px) {
      /* eigene CSS-Regel */
    }

    Grundsätzlich greift immer die CSS-Regel, die

    • am spezifischsten ist ( p { color:red } wird von .main p { color: blue; } überschrieben)
    • bei gleicher Spezifität als letztes geladen wird (dafür sorgt der Eintrag im Customizer) und
    • mit !important stärker gewichtet wird, als andere CSS-Regeln zum gleichen Selektor.

    Also: richtige CSS-Regel schreiben, in eine Media-Query packen und im Customizer unter zusätzliches CSS eintragen. Dann sollte das funktionieren.

    An der Stelle noch der übliche Hinweis, dass wir gerne bei Anwendungsfragen zu WordPress helfen, aber keine Grundlagen in HTML, PHP, CSS, JavaScript usw. vermitteln können, weil es hier den Rahmen eines kostenlosen Supports sprengen würde. Ich werde deshalb auch keine Rückfragen beantworten, wie denn nun die CSS-Regel im Detail aussehen muss.

Ansicht von 1 Antwort (von insgesamt 1)
  • Das Thema „Medien Tag in die CSS Datei einfügen“ ist für neue Antworten geschlossen.