Site title seems assigned as H1

Hello,

I am going to apply css codes to format line styles, such as having H1 underlined and H2 with colored background, and so on, by using customize> additional CSS section.

However, I have realized that when I put a code to have H1 underlined, for example, the site title gets underlined, too. I do not want that. And the similar thing happens to H2 and H3 as well.

So, I would like to have codes that will solve these issues:

The site title gets affected by a css code relating to H1
The tagline gets affected by a css code relating to H2
The titles of sidebar get affected by a css code relating to H3

Please take a look at my site at:
http://suzuki-akiko.com/カウンセリングとは/

I hope I made myself understood.
Can you help?

Regards,

Hi,

Can you share your CSS code for those? I’d like to make some corrections from there.

Regards,
Kharis
aThemes Support

Hi,

Thank you for getting back.
Here is the code.

  h1 {
    padding-bottom: .5em;
    border-bottom: 2px solid #9471a8;
  }
  h2 {
    padding: .25em 0 .5em .75em;
    border-left: 6px solid #ab90bb;
    border-bottom: 1px solid #ab90bb;
  }
  h3 {
    position: relative;
    padding: 0 .5em .5em 1.7em;
    border-bottom: 1px solid #ccc;
  }
  h3::after {
    position: absolute;
    top: .4em;
    left: .4em;
    z-index: 2;
    content: '';
    width: 12px;
    height: 12px;
    background-color:  #ffffcc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

Regards,

Hello there,

Thank you for sharing the code.

To do custom styling specific to the site title, you can use this CSS selector.

    .site-title {
      // Your CSS rules
    }

To modify the site title color CSS, use this selectors:

    .site-title a {
      // Your CSS rules
    }

    .site-title a:hover {
      // Your CSS rules
    }

Or you can simply use CSS :not pseudo selector to exclude the site title when you do H1 tag styling.

    h1:not(.site-title) {
      padding-bottom: .5em;
      border-bottom: 2px solid #9471a8;
    }

I hope this reply helps.

Regards,
Kharis
aThemes Support

Hi,

Thank you for your input.
Given my limited knowledge of codes, I went for the last option and it worked well.

In addition, I would like to ask for another code:

The font sizes on lines of H1, H2, and H3 are too big for mobile phone screens and iPad screes while they look fine on computer screens.

Can you provide me with codes to adjust font sizes for line H1, H2 and H3 for mobile and iPad screens?

If I should raise this point as a separate post, let me know.

Thank you and best regards,

Hi,

You’re welcome!

To apply device screen width specific CSS rules, you can wrap the code with media queries.

For your case, you could start with this example:

    @media only screen and (max-width: 1024px) {

      h1 {
        font-size: 18px;
      }

      h2 {
        font-size: 16px;
      }

      h3 {
        font-size: 15px;
      }
      
    }

I hope this helps. Let me know in new topics for your other questions.

Regards,
Kharis
aThemes Support

Hi,

I do appreciate your incredibly prompt reply.
The code you gave me worked perfectly!

Thank you so much,
Regards,

You’re most welcome here!

I am glad to have an opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support