How can I improve the visual appeal of my product page menu?

Store Design

Topic summary

Goal: reduce spacing between product page menu items (collapsible cards) so options appear closer, similar to the footer menu.

Context: Warehouse theme product page with multiple info options (e.g., Descripción, qué talla soy, envíos, cambios). Screenshots were shared to show excessive spacing and mobile behavior; code snippets are central.

Approaches tried:

  • CSS adjustments to remove bottom margin on cards: .product-block-list__item .card { margin-bottom:0; } with media queries for different screen widths.
  • Increased selector specificity to avoid impacting other .card elements site-wide.
  • Padding tweaks for the collapsible button: .card__collapsible-button { padding: 0 20–30px; } with media queries.

Issues: Changes initially didn’t apply on mobile. Troubleshooting included redundant CSS across breakpoints, but the browser still wasn’t picking up rules.

Resolution: Applying a more forceful CSS rule fixed it on all devices:

  • .card__collapsible-button { padding: 0px 20px !important; }

Notes:

  • CSS (Cascading Style Sheets) controls spacing; selector specificity and media queries target elements and screen sizes.
  • The !important directive overrides conflicting styles.

Outcome: Visual spacing between menu items is successfully reduced; thread resolved.

Summarized with AI on February 28. AI used: gpt-5.
9

I’m having a hard time trying to find why the browser is not picking up that change. Try this please (replace the previous codes with this one):

.product-block-list__item .card {
  margin-bottom:0;
}
.product-block-list__item .card .card__collapsible-button {
  padding:0 20px;
}
@media screen and (max-width: 640px){
  .product-block-list__item .card {
    margin-bottom:0;
  }
  .product-block-list__item .card .card__collapsible-button {
    padding:0 20px;
  }
}
@media screen and (min-width: 641px) {
  .product-block-list__item .card {
    margin-bottom:0;
  }
  .product-block-list__item .card .card__collapsible-button {
     padding:0 30px;
  }
}

Redundant but might solve it, since I can’t spot the causes of the issue on mobile