Want to change button layout on Mobile Store to side by side instead of stacked

Store Design
,

Topic summary

A store owner using the “Origini” theme wants product buttons to display side-by-side on mobile portrait view instead of stacked vertically. The buttons already appear correctly in landscape mode and on desktop.

Proposed Solutions:

Two community members provided CSS code fixes targeting the .rich-text__buttons--multiple class:

  • Solution 1: Add CSS to base.css file with media query for screens max-width 620px, setting min-width: 0px !important
  • Solution 2: Add similar CSS to section-rich-text.css file with media query for max-width 767px, using flex-grow: unset and min-width: unset

Both solutions include step-by-step instructions for accessing the theme code editor through Shopify admin. Screenshots demonstrate the current stacked layout issue and expected side-by-side result. The discussion remains open pending confirmation from the original poster on whether either solution resolved the issue.

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

When viewing my store on mobile devices the buttons appear in a column like this:

LGMOBILE2.JPG
LGMOBILE2.JPG828×737 46.6 KB

I am trying to get them to appear side to side- the way they do on desktop.

They do appear side to side on mobile when in landscape mode, see below:

LGMOBILE1.JPG
LGMOBILE1.JPG1594×523 52.9 KB

They are only stacked in portrait mode.

I would like them to be side by side like the second picture in both portrait and landscape.

If anyone knows any code I can use to fix this please help! Thanks.

my website is https://liberatigalleria.com/ and I am using the theme “Origin”.

2

Look for settings related to “buttons,” “mobile view,” or “layout options” in your theme admin panel. Some themes allow adjusting button alignment or switching between single or double column layout for mobile devices.

3

Hi @Liberati Please add the code in your base.css file.

@media only screen and (max-width: 620px){
.rich-text__buttons--multiple>*{
min-width: 0px !important;
}
}

If you are not sure where is your base.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search base.css in the code in left hand side.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1703055779319.png
sahilsharma9515_0-1703055779319.png715×409 93.7 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

4

Hi @Liberati

You can add code by following these

  1. Go to Online Store → Theme → Edit code.

  2. Open your section-rich-text.css file

  3. Paste the below code
    @media screen and(max-width:767px){

.rich-text .rich-text__buttons–multiple>* {
flex-grow: unset !important;
min-width: unset !important;
}

}