How to align title and price on the same line

Store Design
, , ,

Topic summary

A user is attempting to align product titles and prices on the same horizontal line in the Horizon theme.

Current Status:

  • Successfully working on desktop
  • Not functioning properly on mobile devices
  • Partially implemented on the product page (for “product title” and “product price” elements)

Remaining Issues:

  • Alignment not working for “recommended products” sections
  • Also failing in “categories” and other areas

The user has provided store credentials for troubleshooting assistance. This appears to be an ongoing customization issue requiring CSS or theme template adjustments to achieve consistent cross-device behavior.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I want to align title and price on the same line, on the horizon theme.

It works on desktop but not on mobile.

I got it to work on the product page with “product title” and product price” but not with “recommended products” also on “categories” etc.

Pass: 1234

1 Like
2

Hi @jopmoreira ,

Please add this css in bottom of base.css file. Here is the steps :

=> click on three dots. Find base.css file and put this code bottom of the file :slight_smile:

image
image494×114 2.25 KB

@media screen and (max-width: 749px) {
    .product-grid__card .group-block>* {
        flex-direction: row;
        flex-wrap: nowrap !important;
    }
}
1 Like
3

Hi @jopmoreira
Go to Online store > themes > Customize > "Theme settings (cog icon) => “Custom CSS” Please add below css:

@media screen and (max-width: 749px) {
  .group-block-content.layout-panel-flex {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
  }

  .group-block-content.layout-panel-flex .text-block--full-width {
    width: auto !important;
    flex: 1 1 auto;
  }

  product-price {
    margin-left: auto;
  }
}
4

@jopmoreira

Please add the following css to your assets/base.css bottom of the file.

@media screen and (max-width: 748px) {
  .group-block-content.layout-panel-flex {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
  }

  .group-block-content.layout-panel-flex .text-block--full-width {
    width: auto !important;
    flex: 1 1 auto;
  }

  product-price {
    margin-left: auto;
  }
}

Thanks!