Add padding to section and center text

Store Design

Topic summary

A user is experiencing layout issues with a custom delivery app widget on their product page. The text within the widget is misaligned and needs to be vertically centered with 15px left padding.

Initial Solution Attempt:

  • A support member provided CSS code to add to the theme.liquid file
  • The code targeted .delivery-widget__container > .msg__container and .msg__container classes
  • Used flexbox properties (display: flex, justify-content: center, align-items: center)

Issue with First Solution:

  • The user reported the box became too tall
  • Text alignment changed when they wanted it to remain left-aligned
  • Only needed vertical centering and left spacing

Revised Solution:

  • Updated CSS code provided with modified properties
  • Changed height from fixed 68px to unset !important
  • Added padding: 10px 10px 10px 15px !important
  • Maintained left text alignment while achieving vertical centering

The discussion includes screenshots showing the before/after states and appears to have reached a working solution.

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

@nxjus please Replace above code with this

You can add code by following these steps

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

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.delivery-widget__container > .msg__container { height: unset !important; } .msg__container { padding: 10px 10px 10px 15px !important; }

Here is the result:

Tech_Coding_0-1728122161895.png
Tech_Coding_0-1728122161895.png579×148 8.34 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.