Multi column custom picture

Deutsch Diskussion Shopify Design

Topic summary

A user seeks CSS code to make images fill the entire area within Shopify’s multi-column section, rather than being constrained by default spacing and sizing.

Proposed Solutions:

  • Remove top padding from multi-column cards
  • Set image wrapper width to 100%
  • Adjust border-radius and positioning properties for circular media elements

Implementation:
The suggested CSS should be inserted into the custom CSS section of the multi-column component. The code targets specific Shopify classes like .multicolumn-card-spacing, .multicolumn-card__image-wrapper--third-width, and .media--circle to override default styling constraints.

The discussion remains open as the original poster has not confirmed whether the proposed solution resolved their issue.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello Shopify Community,

is there any code to get the picture in the full area of the multi column?

www.hoodlovevintage.de

pw: hoodliebe2024

im thankful for every help…

Bildschirm­foto 2024-11-01 um 14.42.46.png
Bildschirm­foto 2024-11-01 um 14.42.46.png2782×906 122 KB

2

You can change this via CSS.

3

@HoodLove you code try the following CSS Code:

.multicolumn-card-spacing{
  padding-top:revert;
}

.multicolumn-card__image-wrapper--third-width{
  width:100%;
}

.media--circle{
  border-radius:40px;
}

.multicolumn-card__info{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

If possible, insert it into the custom css of the section.