Shadowing issue with H1- text and non H1-text

[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.

[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?

[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.

[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.

[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.

[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.

[etcbbu]

Not me-being-stuck-in-the-dark-ages-on-design-techniques
I appreciate y'all, I'll give text shadow a whirl. Thanks again.

WYSIWYG Web Builder is the BEST !!!

—etcbbu