I’m trying to make all my hero images responsive and have tried adjusting the padding as you’ve suggested to other users having the same issue with it not appearing properly on mobile but it’s not working.
Can you please advise how, as soon as possible?
I created a test page as I need the real page to have an image that actually looks OK on mobile but I don’t like how it looks having the text as separate which is why I want to make it work using the hero image.
for the image to be in full view across all device sizes the Header Element must have the same aspect ratio as the Background Image. Problem you have is the Height of the Header Element is increasing as the device gets narrower because of the large font sizes and the 50% wide column.
Can you adjust the font sizes and the column width until it displays how you like it on Mobile. Then we can help with changing those inline styles to some CSS to apply only to mobile.