How can I fix my custom liquid CSS for Refresh Theme?

Store Design
, , , ,

Topic summary

A user is experiencing layout issues with a custom pricing table snippet added via custom liquid CSS in Shopify’s Refresh Theme.

Current Problems:

  • The pricing table elements are misaligned and affecting other page sections
  • Display appears correct only when zoomed out to ~30%
  • The user provided a CodePen reference and screenshots showing the broken layout versus expected appearance

Proposed Solution:
Another user suggested replacing specific CSS classes, focusing on flexbox properties:

  • Adding !important flags to display and flex properties
  • Modifying .pricing class with centered justification and flex-wrap
  • Updating .pricing-item with column direction and stretch alignment
  • Setting flex basis to 330px with proper margins

A store preview link (password: Thilot) was shared for troubleshooting. The discussion appears ongoing, awaiting confirmation whether the CSS modifications resolved the layout issues.

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

Hello, I have added this pricing table as a snippet which I am rendering in a custom liquid section.

Could anyone help me with rewriting the CSS code so that it displays properly in Refresh Theme?

It is not too far off, really just the arrangement of the elements, but its also throwing off all the other sections:

biznazz101_0-1687307231592.png
biznazz101_0-1687307231592.png1099×913 78.2 KB

Code: https://codepen.io/weixiong15/pen/xxbPxNb

How it is displaying (if I zoom out to around 30% it does display more accurately):

biznazz101_1-1687307322770.png
biznazz101_1-1687307322770.png2667×1469 192 KB

biznazz101_2-1687307349518.png
biznazz101_2-1687307349518.png2664×1435 152 KB

Preview: https://b1zcvx6h1uam07nu-65197605103.shopifypreview.com
Storefront Password: Tiloht

I added this custom CSS in the theme editor now it looks like this, but still not ideal:

div {
  max-height: 600;
  max-width: 100%;
  display: block;
}

biznazz101_0-1687308181536.png
biznazz101_0-1687308181536.png2615×1447 282 KB

Any help is greatly appreciated thank you!

2

@biznazz101

Please Replace the following CSS class with your CSS file.

.pricing {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
    width: 100%;
    margin: 0 auto;
}

.pricing-item {
    position: relative;
    display: flex !important;
    display: flex;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-align-items: stretch;
    align-items: stretch;
    text-align: center;
    -webkit-flex: 0 1 330px !important;
    flex: 0 1 330px !important;
}

Thanks!