Align call to action buttons on text with columns debut theme

Store Design

Topic summary

Goal: Align “Learn more” call-to-action buttons across columns in the Debut theme’s “Our brands” section, where uneven text heights cause misalignment.

Proposed approaches:

  • Shopify Support option: Use free design time for theme changes via official support (verification required).
  • DIY CSS fix: Add a min-height to the text area (.rte-setting) within the feature-columns section in theme.css.

Desktop outcome:

  • CSS suggestions included setting min-height to 95px or 100px for #shopify-section-feature-columns .rte-setting.
  • The merchant confirmed this resolved alignment on PC.

Mobile issue:

  • Misalignment remained on mobile due to longer content.
  • A targeted mobile fix was suggested using a media query (max-width: 480px) to set a larger min-height (190px) for the same selector.

Notes:

  • Images were provided to illustrate misalignment on desktop and mobile, but the solution centers on CSS changes.
  • Terms: “min-height” ensures uniform text block heights; a “media query” applies styles only on specific screen sizes.

Status: Desktop fixed. Mobile fix proposed but not yet confirmed; discussion appears ongoing.

Summarized with AI on February 28. AI used: gpt-5.
1

How can I align all the “Learn more” call to action buttons in the text with columns block?

Website: www.shoplamark.com

on the section where it says our brands, if the text field in each column is not exactly the same height as the column next to it, the buttons will not be aligned. is there a way to align them?

Capture.PNG
Capture.PNG1829×355 34.9 KB

1 Like
2

Hey @marchenrysaad .

Thanks for reaching out.

I appreciate the screenshot that you have added of the section you are referring to. Since the Debut theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal themes team to make the coding changes on your behalf. If you are interested in using the design time for this change, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before discussing the section with a Support Advisor.

Let me know if you have any questions.

3

@marchenrysaad

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
#shopify-section-feature-columns .rte-setting {min-height: 95px;}
1 Like
4

hello @marchenrysaad

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-feature-columns .rte-setting {
     min-height: 100px;
}
1 Like
5

This worked! Thanks a lot

1 Like
6

Is there any adjustments i should make for it to work on mobile? Currently the issue is resolved on PC but not on mobile.

7

@marchenrysaad

its my pleasure to help us

mobile was different bcz content too much long

8

Is there a way on mobile to fix the buttons? attached sample of how it is looking now

Capture.PNG
Capture.PNG435×500 55.1 KB

1 Like
9

@marchenrysaad

yes please try this code

@media only screen and (max-width: 480px) {
#shopify-section-feature-columns .rte-setting {
    min-height: 190px;
}
}