Skip to content

Conversation

@Axelcureno
Copy link
Member

@Axelcureno Axelcureno commented Jan 29, 2026

Resolves https://jira.corp.adobe.com/browse/MWPW-185783

Fixed full-pricing-express cards not filling viewport width on mobile and tablet. Cards were constrained by Milo's .content max-width and .collection-container grid layout.

Changes:

  • Added mobile media query (max-width: 767px) to override Milo constraints
  • Added tablet media query rules to override .collection-container grid
  • Changed padding from 40px to 16px on mobile/tablet per design spec
  • Changed mobile/tablet breakpoint from 1024px to 1199px
  • Additional design QA fixes for simplified-pricing-express and mas-mnemonic

Test URLs:

Checklist:

  • Code follows project conventions
  • Tests pass locally
  • Linter runs without errors
  • Tested on Before/After URLs

@aem-code-sync
Copy link

aem-code-sync bot commented Jan 29, 2026

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
In case there are problems, just click the checkbox below to rerun the respective action.

  • Re-sync branch
Commits

Fixed full-pricing-express cards not filling viewport width on mobile and tablet.
Cards were constrained by Milo's .content max-width and .collection-container grid layout.

Changes:
- Added mobile media query (max-width: 767px) to override Milo constraints
- Added tablet media query rules to override .collection-container grid
- Changed padding from 40px to 16px on mobile/tablet per design spec
- Changed mobile/tablet breakpoint from 1024px to 1199px
- Additional design QA fixes for simplified-pricing-express and mas-mnemonic
Copy link
Contributor

@seanchoi-dev seanchoi-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved with comments.
(And you will need to fix the nala test)
In overall, looks good to me.

merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='strikethrough'] .price,
merch-card[variant="full-pricing-express"] span[is="inline-price"][data-template='price'] .price-strikethrough {
color: var(--spectrum-gray-500);
color: #8F8F8F;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wondering if we could use an existing color variable instead.
In Figma, it’s using “Palette/gray/500” (#8f8f8f), but I’m not sure where this value is coming from.
In the long term, if we keep using arbitrary colors, the overall look of the site may feel less polished.

padding: 24px 16px;
border-radius: var(--merch-card-full-pricing-express-price-radius);
border: 1px solid #e0e2ff;
border: 1px solid #d5d5d5;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants