People also searched for

Store Design
,

Topic summary

Styling a “people also searched for” section on a collection page to resemble Argos’s pill-style link layout. The goal is cleaner, centered link chips with responsive behavior.

Developments:

  • The page currently uses a simple HTML list of search terms provided by the OP.
  • A contributor shared a CodePen and suggested replacing the existing HTML and adding their CSS for a grid of links with hover styles.

Issue & evidence:

  • On mobile, the links overhang/overflow; screenshots were attached to illustrate the problem (images are central to understanding the issue).

Update:

  • Revised CSS uses CSS Grid for layout (repeat(5, 1fr) on desktop, 1 column at max-width: 767px), centers content at 80% width, and adjusts margins and hover styles to prevent overflow.
  • Key techniques: CSS Grid (structured column layout) and media queries (responsive rules for smaller screens).

Actions:

  • Replace existing HTML/CSS with the CodePen version and apply the updated CSS.
  • Make minor adjustments as needed (margins, padding).

Status:

  • Awaiting confirmation from the OP; resolution not yet confirmed.
Summarized with AI on December 14. AI used: gpt-5.
4

Now i will have to try this on codepen :sweat_smile: