Product price closer to product title on mobile

Store Design
,

Topic summary

A user seeks to reduce spacing between product title and price on mobile devices, noting desktop spacing is already acceptable.

Solution provided:

  • Navigate to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS
  • Add custom CSS targeting mobile viewports (max-width: 768px)
  • The code removes top margin from the price element and bottom margin from the title element using !important declarations

Outcome:
The original poster confirmed the solution worked by thanking the responder. A screenshot was shared showing the visual result of the CSS changes.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Does anybody know how I can change the spacing between the price and title on mobile?
On desktop it’s already fine but we can’t get it fixed on mobile:

URL: https://excitarestudios.myshopify.com/products/flower-ring-silver

2

Hi @JoaquinExcitare

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.product__title {
    margin-bottom: 0 !important;
}
.product__title + div {
    margin-top: 0 !important;
}
}

Here is the result: https://prnt.sc/VylWT3kmpkA6

I hope this helps

Best,

Daisy

3

Hi daisy, Thanks