Adjusting Padding Between Title, Subtitle, and Description on Product Page

[JarnoBroekkamp]

Hello Shopify Community,

I'm working on customizing my store's product pages, and I would like to adjust the padding between the title, subtitle, and description to create a more balanced and visually appealing layout.

Currently, the spacing between these elements seems a bit too tight, and I would prefer to have a bit more room for better clarity and aesthetics.

Could anyone guide me on how to modify the padding between these sections? Any advice or code snippets would be greatly appreciated!

Thanks in advance for your help!

Best regards.

[rajweb]

Hey @JarnoBroekkamp ,

To adjust the padding between the title, subtitle, and description on your product pages, you'll need to make some changes in your theme's CSS. Here's a general approach to help you achieve a more balanced and visually appealing layout:

1. Identify the classes that control the spacing for the title, subtitle, and description. These can usually be found by inspecting the elements on your product page using the browser’s developer tools (right-click > Inspect).

- For example, in most Shopify themes, the product title is often wrapped in a class like .product-title, the subtitle in .product-subtitle, and the description in .product-description.

2. Adjust the padding or margin in your theme's CSS file to increase the spacing between these elements.

Code Snippet:

Here’s an example of CSS code that you can add to your theme.scss.liquid (or any custom CSS file) to adjust the padding:

/* Adjust padding between the title, subtitle, and description */
.product-title {
    margin-bottom: 20px; /* Increase space after the title */
}

.product-subtitle {
    margin-bottom: 15px; /* Adjust space after the subtitle */
}

.product-description {
    margin-top: 10px; /* Add some space above the description */
}

How to Apply:

Follow these Steps:

1. Online store

2. Themes 

3. Edit Code

4. Find your theme.scss.liquid or theme.css file under the "Assets" section.

5. Paste the CSS code above at the bottom of the file.

 Let me know if you'd like me to assist further with a specific theme or additional tweaks!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[JarnoBroekkamp]

When added to the theme.css, it doesn't work on the appearance of the product page

[rajweb]

It seems like the CSS isn't applying due to incorrect selectors or specificity. Try using more specific selectors like this:

.product-single__title {
    margin-bottom: 20px !important;
}

.product-single__subtitle {
    margin-bottom: 15px !important;
}

.product-single__description {
    margin-top: 10px !important;
}

Make sure to inspect the elements and use the correct class names for your theme. Add this to your theme.css file, save, and refresh the page. If it still doesn't work, try clearing your browser cache or check if JavaScript is affecting the layout.

Thanks