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

[CamiC]

Hi, is there any chance someone can help me with this menu?

On my product page (warehouse) I´ve add some options for more information on the product in this way

I would like that this menu is visually nicer, maybe as the menu I have on my foot page: each option of the menu closer.

Thanks!

The URL of my web apge is https://coyoterosa.cl/?_ab=0&_fd=0&_sc=1&key=63d5a315327495a4f38ec6c1c839107415a1e14ddfa3d427d97cca4... 

[marcoswata · Accepted solution]

I don't see the code in place.

But if you want them to be even closer to each other, add this code to the bottom of the theme.css file:

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

 PS: add the previous code too.

[KetanKumar]

@CamiC 

yes your have easy to manage this read this article 

https://support.maestrooo.com/article/83-product-adding-different-tabs-per-product#:~:text=To%20do%2....

[CamiC]

Thanks, but I don´t think you understood me. I want to make the space between each of the options (Descripción, qué talla soy, envíos, cambios...) smaller, so they look as one menu instead of things separated.

[marcoswata]

Try this below.

In assets/theme.css, add to the bottom:

.product-block-list__item .card {
  margin-bottom:0;
}
@media screen and (min-width: 641px){
  .product-block-list__item .card {
    margin-bottom:0;
  }
}

I made the selector more specific, since .card is very generic and could affect other parts of your store.

[CamiC]

Thanks, it didn´t work thou...

It´s still as the first picture, I want something more as the second one (not about the color, but how they are closer to each other)

[marcoswata · Accepted solution]

I don't see the code in place.

But if you want them to be even closer to each other, add this code to the bottom of the theme.css file:

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

 PS: add the previous code too.

[CamiC]

it didn´t work on the phone thou 😞

[KetanKumar]

@CamiC 

which device for that issue 

[marcoswata]

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

[CamiC]

 not yet

[KetanKumar · Accepted solution]

@CamiC 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

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

After Code add view

[CamiC]

Took the other code and add only this one and it worked! Thank you so much!!