Page 1 of 1

Shadowing issue with H1- text and non H1-text

Posted: Tue Dec 02, 2025 1:30 pm
by etcbbu
Hi all, please see this page on which I'm working:

https://woodcraftersofetx.com/contact.php

There are 4 breakpoints: 1366, 1024, 768, and 320.

The two elements in question are that "CONTACT" white H1 text at the top of the page; and then fi you look behind it, there's a second text-box which does not have H1-class styling or any styling. It's a "Copy" of that first "CONTACT" text-object in white letters that *IS* an H1-class. But the second, black-color text, has its z-order to be behind the white one, and then shifted 3 pixels to the right and three pixels down; to create that "Shadow" effect visually.

Notice how it looks good and as-intended on the 1366 default Breakpoint. But then as you decrease the browser-window width into the 1024, 768, and 320 pixel-width; it looks awful. Any ideas?

I know the H1-class thing makes it maybe act differently, but I swear I have done this on other sites (where I have a non-H1 element serving as the black/shadow/sifted/"behind" element), and it works together well.

Let me know if I should post the project-file with just the contact.php page.

Re: Shadowing issue with H1- text and non H1-text

Posted: Tue Dec 02, 2025 3:15 pm
by Pablo
First note that I cannot see what you have done exactly based on the HTML code.
But maybe you did not update the location in the breakpoints?
Or maybe you did not set the font-size in the breakpoints?

Why don't you use text-shadow instead?

Re: Shadowing issue with H1- text and non H1-text

Posted: Tue Dec 02, 2025 5:38 pm
by crispy68
It doesn't look, based on the code, that you have the font size of 'woodcraftersofetxcontactText2' set to 20px in the breakpoint. Try going thru each breakpoint and make sure all the font sizes are set correctly.

However, as Pablo suggested, just use Text-Shadow so you don't have to layer 2 objects to get the shadow effect. Much much easier.

Re: Shadowing issue with H1- text and non H1-text

Posted: Tue Dec 02, 2025 6:19 pm
by etcbbu
Using text shadow won't affect the SEO power of the H1 tags on a back-end level? As y'all know, search engines super-like to see clean H1 tags.

Re: Shadowing issue with H1- text and non H1-text

Posted: Tue Dec 02, 2025 8:32 pm
by Pablo
Using text shadow won't affect the SEO power of the H1 tags on a back-end level? As y'all know, search engines super-like to see clean H1 tags.
I doubt that the style of the tags will have any impact on SEO. I think duplicating the same heading will have more negative effect.

Re: Shadowing issue with H1- text and non H1-text

Posted: Tue Dec 02, 2025 8:41 pm
by crispy68
An H1 tag is an H1 tag. Adding styling (shadow, bold, padding, etc) does not change the fact that it is an H1 tag. So no, these won't affect SEO.

Re: Shadowing issue with H1- text and non H1-text

Posted: Tue Dec 02, 2025 9:45 pm
by etcbbu
Not me-being-stuck-in-the-dark-ages-on-design-techniques :P
I appreciate y'all, I'll give text shadow a whirl. Thanks again.

WYSIWYG Web Builder is the BEST !!!

—etcbbu

Re: *SOLVED* Shadowing issue with H1- text and non H1-text *SOLVED*

Posted: Sun Feb 22, 2026 11:50 pm
by etcbbu
BTW — how can I do the exact "Text Shadow" Effect that I'm now using on H1 pieces of text on this website:

https://woodcraftersofetx.com/

But, just as non-H-designated pieces of responsive text? Just, regular pieces of text?

—etcbbu

Re: Shadowing issue with H1- text and non H1-text

Posted: Sun Feb 22, 2026 11:54 pm
by crispy68
Just create a style in the style manager, assign the shadow to that style and then apply that style to your text object.