Header Text appears different than in header builder

Support
#1

I built a header in pro but when I go to content the text appears different. Also on the published page. I attached two screenshots. My website is https://blog.donnabarnes.com/

How can I fix this? Thanks!

#2

Hi Donna,

Thanks for writing in! It seems there’s a conflict with one of you custom CSS rules in your site, as I see the following CSS rule.

.e311-10.x-text .x-text-content-text-primary {
    font-size: calc(1vw + .5em);
    line-height: 1.1;
    letter-spacing: 0.25em;
    text-shadow: 2px 4px 3px rgba(0,0,0,0.17);
}

Could you please check to see if you have added it, then you need to remove it and re-test.

Thanks!

#3

Thanks for your reply. I looked at the custom CSS on all my elements and don’t see that (I haven’t added any). Where would I look for that? FYI, I built this header starting with the hero header template.

#4

Hi Donna,

Could you please provide us with your WordPress login credentials in a secure note to check your issue further.

Thanks!

#5

Hey Donna,

Sorry for the confusion here. The CSS that @mldarshana referred to is not custom. It’s the generated CSS by the builder.

Thank you for saying that you used the Hero template. I’ve just tested it in my test site and I discovered the issue. I’ll post this in our issue tracker.

For now, I duplicated your bar and manually replicated the text setup. I’ve also recorded the process so you know what’s going on and the process of replication. Please see the secure note.

We’re sorry for the inconvenience.

#6

Thanks for taking the time to correct that for me! However, the new text is not responsive (the old text was). How do I make it responsive?

#7

Hey Donna,

You need to adjust the vw value in the Font Size field. I explained that in my screencast.

Also in my screencast, I showed that the headline is responsive so I wonder why it’s not responsive on your end. Please try clearing your browser cache. If it’s still not responsive after that, can you try showing us what’s on your end using a screencast. There are free screencast options like https://www.useloom.com/

Here’s another responsive text thread: https://theme.co/apex/forum/t/responsive-text-cornerstone/46457/4 where the method I mentioned was also used.

Thanks.

#8

With all due respect the text is NOT responsive in your screencast either. The text now blocks the image of me on smaller breakpoints. I need it to look EXACTLY how I had made it, so that the text resizes to keep my name always on one line and to the right of my image.

But thank you for sending instructions to make responsive text. May I suggest you add any videos you have such as this, walking through a process, to the knowledge base so it’s easier to find. It would save users a lot of time.

#9

Unrelated, but if I could offer an unsolicited opinion, I would add the same text-shadow you have on your title to your subtitle. It’s kinda hard to read “LIFE, RELATIONSHIP, & BREAKUP COACH TV EXPERT & HOST” against the bright lights of the city.

#10

Hey Donna,

I’m sorry. The text is responsive but I realized the effect is very subtle. I can create a new demo for you showing a drastic change in font size as the screen is reduced and also a spacing tip. Please don’t edit the copy of your header for a moment and please stay tuned.

Thanks.

#11

I was working on editing the text of the header and now my bar 2 won’t appear. Perhaps it’s because you’re working on it. I wish there was a notification of you replying so I would have known that. I sincerely hope it isn’t corrupt now.

FYI, I previously had the text hidden in the smaller breakpoints, and created different text.

#12

Hi Ray, thanks for your interest. Yes, I had that text shadowed but when Christian recreated it he left that out.

1 Like
#13

Hey Donna,

Duplicating your headline and Hiding During Breakpoints is also a responsive technique. If you’re comfortable with that method, please feel free to use it. Just a tip. The Gap element can also be has that option so it can be used for responsive spacing. I’ve updated the header in your site now so it looks much better than before. It just needs adjustments if you’re not happy with what I did. Please watch the screencast in the secure note to see the process.

Thank you for your feedback to add videos to the Knowledge Base. The KB is currently undergoing an update so you might see an improvement in the articles. Also, the video thing is only a personal preference of mine. I just find it easy to demonstrate with videos and it might take a long time in article form.

#14

Thank you so much!!! It looks great! That is a great suggestion to use the gap element! I very much appreciate all your help!

#15

We are delighted to assist you with this.

Cheers!

1 Like
#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.