Multicolumn image to bottom

Store Design
,

Topic summary

A user needs help moving images to the bottom of multicolumn sections on their Shopify store (Nobelium theme). The columns appear on product pages when clicking star icons.

Solution Provided:

Add CSS code to flip the column layout using flexbox:

.multicolumn-card.content-container {
    display: flex;
    flex-direction: column-reverse;
}

Implementation Methods:

  1. Direct file edit: Add code to main.css (or base.css, theme.css, style.css) in the theme’s Asset folder
  2. Recommended approach: Use the custom CSS feature within each section’s settings instead

Key Advice:

  • Using section-level custom CSS keeps the theme update-safe
  • Avoid editing CSS files directly as changes may affect other sections
  • Additional padding-bottom may be needed for proper spacing

The discussion reached a resolution with working code provided by multiple contributors.

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

Hello how do i move image to the bottom of column? Origin theme Nobeltitanium.com

Thank you :blush:

1 Like
2

Hi @needelp

Do you mean like this?

Made4uoRibe_0-1725376573887.png
Made4uoRibe_0-1725376573887.png1517×410 71.6 KB

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.multicolumn-card.content-container {
    display: flex;
    flex-direction: column-reverse;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

@needelp do you have an example of a multicolumn section on your site?

4

Sorry! these columns.. Can be found if you click the stars on product page

Screen Shot 2024-09-03 at 5.22.02 pm.png
Screen Shot 2024-09-03 at 5.22.02 pm.png592×552 64.3 KB

5

@needelp you could add the following code to the custom CSS of the section:

.multicolumn-card.content-container{
    display: flex!important;
    flex-direction: column-reverse!important;
    padding-bottom: 2.5em!important;
}

Please note that changes to CSS can also apply to other sections. Furthermore, try not to add custom CSS directly in the CSS files. Use the custom CSS feature of each section. This keeps your Theme clear for updates.

@Sangeetanahar has mentioned this before. I just added the padding to the bottom.

1 Like