/* Target the container for horizontal display */ .gamipress-points-container { display: flex; /* Use flexbox for horizontal layout */ list-style: none; /* Remove list styling */ padding: 0; margin: 0; background-color: #f0f0f0; /* Example background for the capsule */ border-radius: 20px; /* Makes it rounded like a capsule */ overflow: hidden; /* Ensures content stays within the rounded corners */ } /* Style each individual point item */ .gamipress-points-container .gamipress-points-point-item { padding: 10px 15px; /* Padding inside each capsule segment */ margin: 2px; /* Small margin between items */ background-color: #ffffff; /* Background for each point */ border-radius: 15px; /* Rounded corners for each item */ font-weight: bold; /* Make text bold */ color: #333; /* Text-align: center; */ /* Align text to the center */ /* If you want the whole thing to act as one capsule without individual item backgrounds */ /* .gamipress-points-container .gamipress-points-point-item { display: flex; list-style: none; padding: 10px 20px; margin: 0; background-color: #e0e0e0; } */ /* Main capsule background */ /* border-radius: 30px; */ /* Larger radius for a pill shape */ /* align-items: center; */ /* Vertically align items */ /* display: inline-flex; */ /* For horizontal layout */ /* padding: 5px 10px; */ /* Space between point name and value */ /* background: none; */ /* No background for individual items if contained */ /* border-radius: 0; */ /* Remove individual borders if not needed */ /* font-weight: normal; */ /* gamipress-points-container .single-gamipress-points-point-item .gamipress-points-point-item:last-child { margin-right: 0; } */ } /* You might need to adjust these selectors depending on your theme's specific structure. */ /* Inspect your element using your browser's developer tools to find the exact classes. */