Reduce product title size on product page on both mobile and desktop

[alihk]

Hi there,

i am using dawn theme version 15.0.2. My store url is vulph.com. Product title font size is too big. I need help to reduce font size of product title on both mobile and desktop.

thanks

[oscprofessional]

Hello @alihk ,
You need to add some css in your theme.liquid file.

1. Goto shopify admin and select theme.

2. Click on Edit code and open theme.liquid file.

3. Add this code before tag.

[niraj_patel]

Hello @alihk

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

/*For mobile:*/ @media screen and (max-width: 767px) { .product .product__title h1 { font-size: 17px !important; } } /*For desktop:*/ @media screen and (min-width: 990px) .product .product__title h1 { font-size: 23px !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[GTLOfficial]

Hello @alihk
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
add this code at the end of the file.

@media only screen and (min-width: 769px) {
  h1, .h1 {
    font-size: 21px;
  }
}
@media only screen and (max-width: 768px) {
h1, .h1 {
  font-size: 16px;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[alihk]

this has worked. thanks

[masoomi-saxena]

Hey @alihk ,

It seems you can fix this issue by editing your website’s CSS [Cascading Style Sheet] file. CSS is used to display HTML elements and improve the appearance of your website.

Here’s what you need to do:

1. Go to Online Store > Themes > 3 Dots > Edit Code.

2. After clicking ‘Edit Code,’ go to theme.liquid.

3. Find the {% style %} block in your HTML file.

4. Insert your font size adjustments inside the {% style %} block.

5. Use media queries to specify different font sizes for desktop and mobile devices.

You have to insert this code into the file -

/* Default font size for desktop */
body {
    font-size: 14px; /* Adjust this to your desired desktop font size */
}

h1 {
    font-size: 1.8em; /* Adjust heading sizes accordingly */
}

p {
    font-size: 0.9em; /* Paragraph font size */
}

/* Mobile styles */
@media screen and (max-width: 768px) { /* Target devices with a width of 768px or less */
    body {
        font-size: 12px; /* Reduce font size for mobile */
    }

    h1 {
        font-size: 1.5em; /* Reduce heading size for mobile */
    }

    p {
        font-size: 0.8em; /* Reduce paragraph font size for mobile */
    }
}

Here’s what the body of the code will look like -

  
    
    
    {% style %}
      /* Existing CSS styles here */

      /* Default font size for desktop */
      body {
          font-size: 14px; /* Adjust this to your desired desktop font size */
      }

      h1 {
          font-size: 1.8em; /* Adjust heading sizes accordingly */
      }

      p {
          font-size: 0.9em; /* Paragraph font size */
      }

      /* Mobile styles */
      @media screen and (max-width: 768px) { /* Target devices with a width of 768px or less */
          body {
              font-size: 12px; /* Reduce font size for mobile */
          }

          h1 {
              font-size: 1.5em; /* Reduce heading size for mobile */
          }

          p {
              font-size: 0.8em; /* Reduce paragraph font size for mobile */
          }
      }
      
      /* Additional existing CSS */
      html {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }

      body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 100%;
        min-height: 100%;
        margin: 0;
        letter-spacing: 0.06rem;
        line-height: calc(1 + 0.8 / var(--font-body-scale));
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
      }

      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }

      /* Remaining existing CSS here */
    {% endstyle %}
    
    

  
  
    
  

Ensure to save the changes.

Note that -

• body: This keeps the default font size for the body text on the desktop to 14px.
• h1: It is the default font size for heading level 1 [h1] on desktop to 1.8em. The ‘em’ unit is relative to the current font size of the element’s parent. Use relative units like ‘em’ or ‘rem’ instead of absolute units like ‘px’ for better scalability across devices.
• p: Sets the paragraph font size to 0.9em which is 90% of the ‘body’ font size.

Hope this helps you!