How to change the layout of the "Text Columns With Images" section on Combine theme.

Store Design
, ,

Topic summary

A user seeks to modify the “Text Columns With Images” section on the Combine theme to display all items in a single row instead of the default multi-row layout.

Initial Problem:

  • Items currently display in multiple rows
  • User wants horizontal alignment on one row

Solutions Provided:

Two CSS-based approaches were offered:

  1. First solution: Add code to the base.css file via “Edit theme code” in Shopify Admin, modifying the grid template columns property

  2. Second solution (recommended): Use the theme’s built-in Custom Code section (found in theme settings) for a more dynamic approach that automatically handles additional items without disrupting other theme properties

Both solutions involve CSS grid modifications using display: grid and grid-template-columns properties with specific gap and alignment settings.

Outcome:

  • The issue was successfully resolved
  • User confirmed the solution worked perfectly
  • Screenshots were provided showing code placement and expected output
Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hi, I would like to make all the items on the same row. www.dtffox.com
Thank you in advance!

This is what it currently is
This is what it currently is1926Ă—1252 199 KB

This is what I would like
This is what I would like2694Ă—472 104 KB

2

Hi Dtffox,

Kindly share your store Password.

Thanks

3

Hello @dtffox
password?

4

My apologies, I didn’t know it had a password enabled. It should be turned off now.

5

My apologies, I didn’t know it had a password enabled. It should be turned off now.

6

Hello there,

In Shopify Admin, navigate to “Edit theme code”, then open the “base.css” file and add the following code at the end:

.mount-css-slider.grid--align-items-stretch {
display: grid;
grid-template-columns: repeat(8,1fr);
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

7

Hey @dtffox ,

Please navigate to theme customized, and click on setting and find custom code at the end, and paste this code there, the code will work dynamically like if you add more products then it will be start from new row. without disturbing any other properties of the current theme. If my solution worked then accept it.

.grid.grid--layout.grid-4.grid-portable-3.grid-lap-2.grid-palm-1.grid--align-items-stretch {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(137px,1fr));
    grid-column-gap: 6px;
    grid-row-gap: 35px;
}

output:

![Screenshot_43.png|1872x549](upload://hYID2VAUPgwwpvvU8fHR23seonF.jpeg)

code pasting place:

Screenshot_34.png
Screenshot_34.png363Ă—866 24.1 KB

1 Like
8

That worked PERFECTLY…thank you!