Payment icons underneath "buy now button" alligned straight

Store Design
, , , , ,

Topic summary

A user seeks to align payment icons in a single horizontal row beneath the “buy now” button on mobile product pages. Currently, the icons display across two rows.

Initial Problem:

  • Payment icons wrapped into multiple rows on mobile
  • User provided custom Liquid code with CSS styling
  • Site uses Dawn theme on Shopify

Solution Provided:

  • Remove flex-wrap property and excess margin from CSS
  • Multiple code variations offered for different alignment preferences (left, center)
  • Includes media query for mobile-specific styling at 750px breakpoint

Ongoing Issue:

  • Despite implementing suggested code, icons align right instead of center
  • User identifies “blank margin” or dead space next to buy buttons preventing proper centering
  • Multiple code iterations attempted without resolving the alignment problem
  • Discussion remains open with troubleshooting in progress

Status: Unresolved. The helper provided updated CSS code snippets and suggested clearing cache/using incognito mode, but the centering issue persists due to unexplained spacing.

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

Hi Qasim,

Upon refreshing my product page, it seems like the payment icons are alligned right instead of in the center.
I have used this code:

.icon-list-custom { display: flex; list-style: none; justify-content: center; gap:10px; padding: 1px; margin-top: -1rem; margin-bottom: -1rem; } @media only screen and (max-width: 750px){ .icon-list-custom{ justify-content: flex-start; } }

Why is it not in the center?