Order Summary Text

Ask the community
1

Hi there!

If you’re looking to adjust the width of the text within your Funnelish order summary box (specifically, preventing the bundle name from stretching too far and bringing the pricing text closer to the left), this can easily be changed using a quick Custom CSS tweak.

As originally solved by Anwer in our community, you can use the following CSS snippet to adjust the layout perfectly.

The CSS Solution

Simply copy and paste this code into your Funnelish Custom CSS settings:

CSS

.order-summary .os-row .os-price {
    max-width: fit-content;
}

This code forces the pricing element to only take up as much horizontal space as its content requires, allowing the text on the left to balance out nicely.

If you are expanding on your checkout design, keep these modern best practices in mind:

  • Mobile Responsiveness First: Always test your CSS changes on mobile devices. If the text feels squished on smaller screens, consider wrapping Anwer’s code in a desktop-only media query (e.g., @media (min-width: 768px) { ... }) to let the mobile version stack naturally.

  • Visual Hierarchy: Pair width adjustments with subtle tweaks to font-weight or text color to ensure the final total price remains the most prominent element in the summary box.

  • Maintain Page Speed: Funnelish prioritizes lightning-fast checkouts. Utilizing native, standard CSS classes like .order-summary and .os-row (as shown above) ensures your layout modifications remain lightweight and won’t negatively impact the render time or Core Web Vitals of your sales funnel.

Let us know below if you need any further assistance dialing in your checkout layout!

Untitled (500 x 500 px) (4)
Untitled (500 x 500 px) (4)500×500 75.6 KB

I would like to change the width of the text in the order summary box. For example, in the image attached I would like the text on the left (name of the bundle) to not go out as far, and the text on the right (pricing etc) to go out more to the left.

Was told by funnelish support that Custom CSS is required and was hoping someone would be able to help me.

Thanks

2

Hi @Admin_Support, welcome to the community! :waving_hand:

Thanks for the details — adjusting the layout of the order summary box is definitely doable with some custom CSS.

To provide the most accurate solution, could you please share the URL of your page (or a preview link)? This will help me inspect the elements directly and give you CSS that fits your layout perfectly.

Happy to help once I can take a closer look! :blush:

3

Is it possible for me to just send only you the link? I don’t really want to dox my funnel.

4

Yes, you can DM me. Thank you

5

I don’t see a way to DM you. Would you mind tell me how?

6

I have just messaged you. You can send me there.

7

hi @Admin_Support …

Use the following CSS for chekout order summary:

.order-summary .os-row .os-price {
    max-width: fit-content;
}
1 Like