Shadowing issue with H1- text and non H1-text
Posted: Tue Dec 02, 2025 1:30 pm
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.
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.