Theme Focal: Bild soll vollständig bis zum Rand - links und rechts

Deutsch Diskussion Shopify Design
,
1

IMG_4219.PNG
IMG_4219.PNG1170×2532 298 KB

Ich möchte, dass das Bild die freien Flächen auf der linken und rechten Seite vollständig ausfüllt. Leider weiß ich nicht, wie ich das umsetzen kann. Habe bereits mehrere CSS codes verwendet, aber nicht hinbekommen

Mein Shop lautet: comforya-shop.de

Passwort: 111

2

Welche freien Flächen? Ich finde es sieht so am besten aus auf allen Bildschirmbreiten und ich würde an deiner Stelle das nicht ändern:

2025-01-23_17-46-53.gif

Ansonsten probiere folgendes CSS im CSS-Editor, kann aber scheisse aussehen, oder das ganze komplett zerschießen:

#shopify-section-template--24661204074844__image_with_text_X4Dq48 .image-with-text__image-wrapper img {
    width: 100% !important;
    max-width: none !important;
    height: auto;
    object-fit: cover; /* Optional */
}

Der übergeordnete Container muss ebenfalls die volle Breite nutzten:

#shopify-section-template--24661204074844__image_with_text_X4Dq48 .container {
    max-width: 100% !important;
    padding: 0 !important;
}

Falls das Bild innerhalb eines container-Elements eingeschlossen ist, begrenzt Shopify dieses leider. Durch das Setzen von max-width: 100% und padding: 0 kannst du probieren, dass es über den gesamten Viewport geht.

Oder Flexbox:

#shopify-section-template--24661204074844__image_with_text_X4Dq48 .image-with-text__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
3

Die Bilder sind an den Container gebunden. Hier musst du die Gesamtbreite der Seite auf 100% stellen und alles, was nicht an den Rand soll, wieder per CSS händisch umstellen. Eine Übersteuerung ist zwar immer möglich, doch birgt die neue Gefahren von Anzeigeproblemen auf bestimmten Geräten.