I am also encountering the same issue with my website’s header image — it looks perfectly fine on desktop, but on mobile devices, it gets cropped on the sides instead of scaling down proportionally. What’s odd is that other pages using the same header or background image seem to scale correctly, just like you described.
I’ve tried adjusting some CSS properties like background-size: cover and background-position: center, but that only partially fixes it — the image still doesn’t resize properly on smaller screens. I’m wondering if there’s a difference in how the main page container or layout handles responsive scaling compared to other pages.
If anyone has figured out which specific CSS or JavaScript tweak can make the header image scale smoothly across all devices, I’d really appreciate some guidance. You can check my site thetexasroadhousemenu.com and please guide me as I am not a technical person.