Question 11487 in Shopify Question posted in
The Shopify help center can be found here.

remove bold from headings on all product pages (shopify)

I want the h1 element on product page to be weight 300.

<h1>
  <strong>caption</strong>
</h1>

So I styled it using font-weight: 300 !important
(see screenshot attached : inspector screenshot

But since the text I mean to style is wrapped in <strong>, changing the font-weight on the h1 doesn’t remove the bold.

It happens for all h1 for all products.

Is it possible to overwrite the <strong> in all h1 by adding a rule here?

Thanks!

Tags:

2

Answers


  1. 0

    You can put it this way:

    First: note the arrangement of your stylesheet. They overwrite eachother.
    Secondly, add a new line to your css:
    h1 > strong {font-weight: 300!important;}

    In your attempt you’re trying to change the h1 only, but you want to change this particular combination. That’s what you’ll do with this suggestion.

    Login or Signup to reply.
  2. 0

    [Not strictly addressing Shopify here]

    This solution applies in general using vanilla CSS but I’m not familiar with the shopify platform and I can’t be sure how it’s expected to be instructed and if there’s a limited support for any possible nuance supported by web standards.

    Since the <strong> tag is nested inside the <h1> it will hold its own style even if the parent has a lighter font-weight.

    To address that scenario using css only, you may have a rule with a selector targeting <h1> descendants like this:

    h1 *{
  font-weight: 300;
}
    <h1>
  <strong>Test</strong>
</h1>

    But there are many options.. also narrower like h1 strong{/*...*/}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search