I need you to modify ONLY the mobile behavior of the existing Trust Badges section.
IMPORTANT:
DO NOT redesign the section.
DO NOT change the desktop design.
DO NOT change colors.
DO NOT change typography.
DO NOT change font sizes.
DO NOT change icons.
DO NOT change text.
DO NOT change spacing.
DO NOT change borders.
DO NOT change card sizes.
DO NOT change the existing HTML structure unless absolutely necessary for the animation.
DO NOT touch any other section of the homepage.
DO NOT touch the header, hero, products, lift types, About Us, reviews, footer, or any other code.
The current Trust Badges section is already correct on desktop and looks like this:
1. Secure Checkout
Protected payment flow
2. Freight Coordination
Delivery details before payment
3. Customer Support
Help before ordering
4. Manufacturer-Backed Products
Real catalog equipment
The current desktop appearance must remain EXACTLY as it is.
PROBLEM:
On mobile, the four Trust Badges currently become broken/narrow columns and the text wraps one character per line.
I ONLY want you to fix the mobile behavior.
MOBILE REQUIREMENT:
At screen width 600px and below:
- Keep the exact current visual design of each badge.
- Keep the exact current icon.
- Keep the exact current text.
- Keep the exact current colors.
- Keep the exact current card proportions and styling.
- The four badges must remain horizontal.
- Each badge must have enough width for its text to display normally.
- NEVER allow text to become one character per line.
- NEVER stack the four badges vertically.
- NEVER squeeze the four badges into four tiny columns.
- NEVER create a broken horizontal overflow.
- The Trust Badge section itself must remain full width.
Create a smooth automatic horizontal carousel/marquee:
Secure Checkout
→ Freight Coordination
→ Customer Support
→ Manufacturer-Backed Products
The movement must go from RIGHT TO LEFT.
Each badge should enter from the right side, remain readable while visible, then move toward the left and disappear.
The next badge should follow smoothly.
The animation must loop continuously.
There must be no sudden jump, no flashing, no duplicated visible cards, and no broken layout.
The animation should be smooth and professional, approximately 12–20 seconds per full cycle.
IMPORTANT:
The animation must ONLY be enabled on mobile.
Desktop:
- NO animation.
- NO layout changes.
- Keep the exact existing desktop Trust Badge design.
Tablet:
- Keep the layout responsive and readable.
- Do not break the section.
- If necessary, use the same horizontal mobile behavior around the mobile breakpoint, but do not alter the desktop appearance.
IMPLEMENTATION RULES:
1. Do not search for or replace unrelated elements.
2. Do not use broad selectors such as:
div { ... }
section { ... }
body { ... }
3. Target ONLY the Trust Badge section.
4. Do not duplicate the entire Trust Badge section.
5. Do not create multiple copies of the four badges.
6. Do not repeatedly append cloned badges on every MutationObserver run.
7. If JavaScript is used, initialize it only once.
8. Do not move price elements, product images, buttons, or any product-card elements.
9. Do not modify any existing product-card code.
10. Do not modify any other homepage section.
11. Preserve all existing desktop CSS.
12. Put the mobile-specific rules inside an appropriate @media query.
13. Make sure the final result works correctly on iPhone Safari and Android mobile browsers.
Most importantly:
I am NOT asking for a new design.
I am asking for ONLY this:
KEEP THE CURRENT TRUST BADGES DESIGN EXACTLY THE SAME
+
MAKE THE FOUR BADGES MOVE SMOOTHLY FROM RIGHT TO LEFT ON MOBILE.
Before giving me the final code:
- Inspect the existing Trust Badge HTML/classes.
- Identify the exact parent/container of the four badges.
- Modify only that container's mobile behavior.
- Do not guess selectors if an existing class/id is available.
Return the COMPLETE corrected code, not a partial snippet.
The final code must preserve everything that already works and change ONLY the mobile horizontal animation behavior of the Trust Badges.
FREE SHIPPING ON ALL ORDERS OVER $500! | UP TO 50% | CALL US NOW +1 (850) 429-4106
FREE SHIPPING ON ALL ORDERS OVER $500! | UP TO 50% | CALL US NOW +1 (850) 429-4106
