Minimize hight

Shopify Discussion

Topic summary

A user needed help reducing the height of a multicolumn card section on their Shopify mobile site, as shown in their screenshot.

Solution Provided:

  • Add custom CSS targeting mobile screens (max-width: 768px)
  • The CSS removes padding from the image wrapper and info container elements
  • Code should be pasted into: Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS

Key CSS changes:

  • Set padding-top: 0 on .multicolumn-card__image-wrapper
  • Set padding-block: 0 on .multicolumn-card__info
  • Set margin-top: 0 on the .rte element

Status: Resolved - the user confirmed the solution worked successfully.

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

Hello friends, how can I minimize the hight of this section?

Bildschirmfoto 2024-12-28 um 17.39.20.png
Bildschirmfoto 2024-12-28 um 17.39.20.png650×1296 170 KB

2

Hi @NikosBat

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.multicolumn-card.content-container .multicolumn-card__image-wrapper {
    padding-top: 0 !important;
}
.multicolumn-card.content-container .multicolumn-card__info {
    padding-block: 0 !important;
}
.multicolumn-card.content-container .multicolumn-card__info > .rte {
    margin-top: 0 !important;
}
}

Here is the result:

image_480.png
image_480.png303×480 39.1 KB

I hope this helps

Best,

Daisy

1 Like
3

Thank you very much that solved my problem