Body Text is jumping/moving on Hover

Eric Tuvel

• June 30, 2022 14:58

I am not sure why this is happening, but for some reason when I hover over the body text of a Blog Post, the text is moving, like the hover state is changing the spacing the text. I do not understand why this is happening. Can you please help? This is the Custom CSS I have included in the Customizer, so I am not sure why it would be doing this. I have linked to an example Post with the issue. It appears to be something with the Heading tags in the CSS but I need those in order for my typography to work until you release the fix for the H1, H2, etc. tags.

Example Post

https://visionzeronetwork.org/ss4a/

You can watch a screen recording here:

https://youtu.be/ay5raS7WafE

 

Here is the CSS I have added to the Customizer:

.page h1{
    font-size: 50px !important;
}

.page h2{
    font-size: 40px !important;
}

.page h3{
    font-size: 32px !important;
}

.page h4{
    font-size: 28px !important;
}

.page h5{
    font-size: 24px !important;
}

.page h6{
    font-size: 20px !important;
}

.single h1 {
    font-size: 50px!important;
}

.single h2 {
    font-size: 40px!important;
}

.single h3 {
    font-size: 32px!important;
}

.single h4 {
    font-size: 28px!important;
}

.single h5 {
    font-size: 24px!important;
}

.single h6 {
    font-size: 20px!important;
}

/* unvisited link */
.brz .brz-rich-text__custom a:link {
  color: #0084b6;
}

.brz .brz-wp-post-content a:link {
  color: #0084b6;
}

.brz .brz-wp-post-content a:hover {
  color: #0084b6;
}

.brz-rich-text a {
   color: #0084b6 !important;
}

/* unvisited link */
.li a:link {
  color: #0084b6;
}

/* visited link */
.brz .brz-rich-text__custom a:visited {
  color: #01688f;
}

/* mouse over link */
.brz .brz-rich-text__custom a:hover {
  color: #1b3039;
}


/* spacing between paragraphs */
p {
  margin: 0 0 1em 0;
}

 

0

• 

  KC George

  • July 01, 2022 08:24

  Hi Eric,

  This seems to be the CSS class which is causing the issue. If you add this code to Additional CSS, the issue could be resolved. Please see this video https://jmp.sh/5zIPPls

   

  .brz .brz-css-byxuk strong, .brz .brz-css-byxuk:hover b {
      line-height: inherit;
  }

  0
• 

  Eric Tuvel

  • July 01, 2022 13:56

  Thank you, this worked.

  0

Please sign in to leave a comment.