Align buttons to same height in columns (Broadcast Theme)

Store Design
,

Topic summary

Goal: Align call-to-action buttons to the same vertical position within a desktop column section on the Broadcast theme.

  • Initial attempt: Custom CSS targeting a specific SectionColumns ID didn’t work.
  • Proposed fix: Add flexbox CSS in theme.css for .column__grid__item, .column__content, and .column__text.rte to stretch content and align buttons.

Outcome of first fix: Buttons align only after window resize; on initial page load they remain misaligned. A Loom video was provided to demonstrate the load vs. resize behavior.

  • Second suggestion: Revised CSS adding height: 100% to the container elements.
  • Result: The section disappeared after applying the new code, so the change was reverted/unsuccessful.

Context: Store URL and password were shared for testing.

Status: Unresolved. Another participant later asked if a solution was found, indicating the issue remains open and no confirmed fix or action items were finalized.

Summarized with AI on January 13. AI used: gpt-5.
1

Hello,

I’m trying to alight my buttons on desktop view of a column section:

Screen Shot 2022-12-06 at 10.42.46 AM.png
Screen Shot 2022-12-06 at 10.42.46 AM.png1534×1210 276 KB

I’ve tried this code:

#SectionColumns--template--17120718324025__2282483d-714a-429c-ad85-6a1be23c6e89 .rte-setting
  {min-height: 95px !important ;}

But no luck. I’m not sure what else to include in the code to call for that section.

This is the website and password

https://viellabeaute.com/

pw: viella

Thanks in advance :grinning_face_with_smiling_eyes:

2

Hi @sotangy
You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

.column__grid__item {
display: flex;
flex-direction: column;
}
.column__grid__item  .column__content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
flex: 1;
}
.column__grid__item .column__text.rte {
  flex: 1;
}
3

Hello,

I tried the code, the alignment is corrected when i resize the window, however when the page first loads, it doesn’t automatically align.

See here

4

@sotangy
try to replace the code above with this

.column__grid__item {
display: flex;
flex-direction: column;
height: 100%;
}
.column__grid__item  .column__content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
flex: 1;
}
.column__grid__item .column__text.rte {
  flex: 1;
}
5

Hi again,

The new code made the section disappear :sweat_smile:

6

Hi @sotangy , having the exact same issue - did you ever find a solution to this by chance?