How can I decrease image size in the Dawn theme?

Store Design
,

Topic summary

A user seeks to reduce the size of a specific image on their Shopify store (seoulstation.ch) using the Dawn theme.

Initial Solution Provided:

  • Add custom CSS to the base.css file
  • Target the multicolumn card container with width adjustments
  • Use flexbox properties for centering

Issue Encountered:
The first CSS solution affected all multicolumn images, not just the targeted one.

Revised Approach:
A more specific CSS selector was provided using the slide’s unique ID to target only the desired image.

Latest Development:
The user has moved the image from the “Multicolumn” section to an “Image banner” section, requiring new CSS code to accommodate this structural change.

Status: Ongoing - awaiting updated CSS solution for the new image banner placement.

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

I need to reduce the following picture on www.seoulstation.ch - how? Thank you!

10xfuel_0-1680253504333.png
10xfuel_0-1680253504333.png1618×632 185 KB

2

HI @10xfuel

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

li#Slide-template–18505260138797__49891ee5-3822-493e-8eec-40bc429b38f9-1 {

display: flex;

justify-content: center;

}

.multicolumn-card.content-container {

width: 30% !important;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

this change impacts all multicolumn images - not only this one. Any work-around?

4

Please try again with this code:

li#Slide-template–18505260138797__49891ee5-3822-493e-8eec-40bc429b38f9-1 {
display: flex;
justify-content: center;
}
.slider-mobile-gutter .multicolumn-card.content-container {
width: 40%;
}

5

I move the picture from “Multicolumn” to “image banner”: can you send a new code to reduce the image size? Thank you!