CHange padding on mobile (price and product name)

Store Design
,

Topic summary

Main issue: Adjust mobile spacing for product name and price in a Shopify theme. Desktop styling changed, but mobile did not.

Recent actions:

  • Store URL shared: excitarestudios.myshopify.com.
  • CSS added to theme.css/based.css with a mobile media query (@media max-width:767px) targeting .card__heading.
  • Attempts included setting padding (10px 0), then adding !important, and finally changing line-height to 0.5.

Outcomes:

  • All CSS attempts reported as not working on mobile.
  • No confirmed changes or resolution.

Context/terms:

  • “Padding” controls space inside an element around its content.
  • “Line-height” affects vertical spacing between lines of text.
  • A “media query” like @media(max-width:767px) applies styles on smaller screens (typical mobile).

Attachments:

  • Screenshots were included but not essential to the solution.

Status:

  • Unresolved. The correct mobile styling approach or selector remains undetermined.
  • Further details (e.g., exact mobile element selectors or theme specifics) are needed to proceed.
Summarized with AI on December 13. AI used: gpt-5.
1

Does anybody know how to change padding on mobile for the price and product name?

On desktop it changed but not on mobile.

Screenshot 2024-12-02 at 14.36.34.png
Screenshot 2024-12-02 at 14.36.34.png335Ă—396 73.8 KB

Screenshot 2024-12-02 at 14.36.19.png
Screenshot 2024-12-02 at 14.36.19.png1461Ă—783 105 KB

2

Hi , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

1 Like
3

https://excitarestudios.myshopify.com/

4

Hi

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file
@media(max-width:767px){
.card__heading {
    padding: 10px 0;
 }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

5

Unfortunately, This code does not work

6 
@media(max-width:767px){
.card__heading {
    padding: 10px 0 !important;
 }
}
7

Nope, does not work either

8

Hi

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file
@media(max-width:767px){
.card__heading {
    line-height: 0.5;
 }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!