Align section in product page

Store Design
, ,

Topic summary

A user is experiencing a CSS alignment issue on their product page. When the screen size increases, a specific section (highlighted in a screenshot) shifts to the left instead of staying aligned under the product description.

Proposed Solution:
Another user suggested adding CSS code to the base.css file, targeting:

  • variant-radios.no-js-hidden with display: grid and justify-content: start
  • .price.price--large and .product__tax with padding adjustments
  • .price--on-sale.price--show-badge with display: flex and justify-content: start

Current Status:
The suggested CSS fix did not resolve the issue. The original poster confirmed it “didn’t work” and provided an additional screenshot. The problem remains unresolved and requires further troubleshooting.

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

Hi for some reason when the screen gets bigger the section I have circled in red moves to the left can you please help me align it under the product description like on the laptop? Thank you

Pass: biangu

Url: www.matibrnd.com

MT27_0-1711560672845.jpeg
MT27_0-1711560672845.jpeg1645×2193 405 KB

2

Add This css in your base.css

variant-radios.no-js-hidden {
    display: grid;
    justify-content: start;
}
.price.price--large.price--on-sale.price--show-badge {
    display: flex;
    justify-content: start;
}
.product__tax {
    padding-left: 0 !important;
}
3

didn’t work..

MT27_0-1711643715955.png
MT27_0-1711643715955.png2113×1099 289 KB