Need Help Adjusting Quantity Gap and Aligning Questions on Desktop (Debutify Theme)

[pfenniger]

Hi!

I'm working on customizing my Shopify store using the Debutify theme, and I've run into a couple of design issues on the desktop version:

1. Gap Between Quantity Options:
   I’d like to reduce the large gap between the quantity options, as shown in this screenshot: https://gyazo.com/ee4c13a865b783637a96d23bce69ee4d.

2. Aligning the Questions Under "Add to Cart":
   The questions (e.g., “Why choose us?”) below the "Add to Cart" button are too wide and not well-aligned. I’d like them to appear thinner and more aligned, similar to this design: https://gyazo.com/5f5dd1994c7d7859642456ae0b1aaba0.

On the desktop version:

• A smaller gap between the quantity options.
• A neater alignment for the questions, making them thinner and centered for better visuals.

I’d appreciate any guidance on how to achieve this, especially if it involves tweaking the CSS or adjusting the theme settings.

Thanks in advance!

[namphan · Accepted solution]

Hi @pfenniger,

Please send the website link, I will check it for you

[pfenniger]

Thanks!
check PMs 🙂

[namphan]

Hi @pfenniger,

1: Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.dbtfy-quantity-breaks .dbtfy-quantity-breaks__quantity:not(:last-child) {
    margin-bottom: 0;
    padding-bottom: 0;
}

2: Please add code:

.dbtfy-product-tabs .dbtfy-product-tabs__tab.dbtfy-product-tabs__tab--vertical .card {
    padding: 0;
    width: 100%;
    max-width: none;
}