• Hello,

    I am currently rebuilding this website https://www.clara-schumann-kammerchor.de in WordPress (Astra Theme with Spectra), because the person who created it in HTML is no longer available. The result currently looks like this: https://clarasnet.de/

    I still have problems with the layout:

    1) The header should take up exactly the width of the container, but protrudes symmetrically beyond both sides of the container (to different degrees in different browsers).

    2) The text should have a clearly recognizable distance to the right edge of the photo, which is mentally extended downwards. This works reasonably well in the editor, but when I put the page online, the result is more than unsatisfactory.

    Do I have to change anything “CSS-wise”? If so, where do I do this? I am an absolute beginner in this respect.

    Many thanks in advance!

    ` wp-core
    
    version: 6.4.3
    site_language: de_DE
    user_language: de_DE
    timezone: +00:00
    permalink: /%postname%/
    https_status: false
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 1
    dotorg_communication: true wp-paths-sizes wordpress_path: /homepages/38/d679586997/htdocs/app680685495
    wordpress_size: 57,85 MB (60658645 bytes)
    uploads_path: /homepages/38/d679586997/htdocs/app680685495/wp-content/uploads
    uploads_size: 12,59 MB (13199941 bytes)
    themes_path: /homepages/38/d679586997/htdocs/app680685495/wp-content/themes
    themes_size: 21,87 MB (22931054 bytes)
    plugins_path: /homepages/38/d679586997/htdocs/app680685495/wp-content/plugins
    plugins_size: 43,89 MB (46022563 bytes)
    database_size: 26,36 MB (27639808 bytes)
    total_size: 162,56 MB (170452011 bytes) wp-active-theme name: Astra (astra)
    version: 4.6.8
    author: Brainstorm Force
    author_website: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
    parent_theme: none
    theme_features: core-block-patterns, astra_hooks, widgets-block-editor, align-wide, automatic-feed-links, title-tag, post-thumbnails, starter-content, html5, post-formats, custom-logo, customize-selective-refresh-widgets, editor-style, woocommerce, rank-math-breadcrumbs, amp, widgets, menus
    theme_path: /homepages/38/d679586997/htdocs/app680685495/wp-content/themes/astra
    auto_update: Aktiviert wp-themes-inactive (1) Twenty Twenty-Four: version: 1.0, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert wp-mu-plugins (3) 1&1 Managed WordPress: version: 1.1.0, author: 1&1
    1&1 Product Subdomain: version: 1.1.0, author: 1&1
    IONOS Marketplace: version: 1.1.6, author: IONOS wp-plugins-active (10) Custom Fonts: version: 2.1.3, author: Brainstorm Force, Automatische Aktualisierungen aktiviert
    IONOS Assistant: version: 8.5.10, author: IONOS, Automatische Aktualisierungen aktiviert
    IONOS Help: version: 2.2.1, author: IONOS, Automatische Aktualisierungen aktiviert
    IONOS Journey: version: 2.1.1, author: IONOS, Automatische Aktualisierungen aktiviert
    IONOS Login: version: 2.2.1, author: IONOS, Automatische Aktualisierungen aktiviert
    IONOS Navigation: version: 1.0.7, author: IONOS, Automatische Aktualisierungen aktiviert
    IONOS Performance: version: 2.0.3, author: IONOS, Automatische Aktualisierungen aktiviert
    IONOS Security: version: 1.1.0, author: IONOS, Automatische Aktualisierungen aktiviert
    Spectra: version: 2.12.4, author: Brainstorm Force, Automatische Aktualisierungen aktiviert
    Yoast Duplicate Post: version: 4.5, author: Enrico Battocchi & Team Yoast, Automatische Aktualisierungen aktiviert wp-media image_editor: WP_Image_Editor_GD
    imagick_module_version: Nicht verfügbar
    imagemagick_version: Nicht verfügbar
    imagick_version: Nicht verfügbar
    file_uploads: 1
    post_max_size: 128M
    upload_max_filesize: 128M
    max_effective_size: 128 MB
    max_file_uploads: 20
    gd_version: 2.3.0
    gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
    ghostscript_version: 9.53.3 wp-server server_architecture: Linux 4.4.400-icpu-097 x86_64
    httpd_software: Apache
    php_version: 7.4.33 64bit
    php_sapi: cgi-fcgi
    max_input_variables: 1000
    time_limit: 30
    memory_limit: 1024M
    max_input_time: -1
    upload_max_filesize: 128M
    php_post_max_size: 128M
    curl_version: 7.74.0 OpenSSL/1.1.1w
    suhosin: false
    imagick_availability: false
    pretty_permalinks: true
    htaccess_extra_rules: true
    current: 2024-03-10T18:59:08+00:00
    utc-time: Sunday, 10-Mar-24 18:59:08 UTC
    server-time: 2024-03-10T18:59:07+00:00 wp-database extension: mysqli
    server_version: 10.6.15-MariaDB-log
    client_version: mysqlnd 7.4.33
    max_allowed_packet: 67108864
    max_connections: 3000 wp-constants WP_HOME: https://clarasnet.de/
    WP_SITEURL: https://clarasnet.de/
    WP_CONTENT_DIR: /homepages/38/d679586997/htdocs/app680685495/wp-content
    WP_PLUGIN_DIR: /homepages/38/d679586997/htdocs/app680685495/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    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_ENVIRONMENT_TYPE: Nicht definiert
    WP_DEVELOPMENT_MODE: undefined
    DB_CHARSET: utf8
    DB_COLLATE: undefined wp-filesystem wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    mu-plugins: writable

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter olbasaray

    (@olbasaray)

    Maybe I should break down the question:

    I adapt the width of my header that it fits exactly with the width of my content. Problem: It only works for one browser. E.g. in Opera it is fine, in Chrome the header is too wide, in Edge it is too narrow. How can I overcome this and assign to the header the exact width of the content, i.e. of the main container?

    Cheers

    Oliver

    Hi @olbasaray,

    You need to have the Header width as Content Width. Refer to this screenshot, please.

    I hope it will help.

    Kind regards,
    Herman ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Alignment problems header and content with Astra/ Spectra’ is closed to new replies.