Here's the page: https://www.stadriemblems.com/products/custom-enamel-pins/
As you can see on this page, I have text overlayed on this hero image, and in the code you'll see that the placement is defined as such
There are four different breaks where it changes. The problem is that the largest size is just too broad. If you start resizing the browser window, it doesn't take long for the text to get cut off on the left because it's still obeying the -350 requirement, (Note that I have a 27" 4k monitor).
Is this pulling from the master bootstap media query definitions? If so, is there a way to override it and define the breaks right in this code?
Also, is there a way to control which section of the image is displays at different screen sizes? When you shrink it down to phone size, all you really see is the woman's hand.
Am I making an sense at all?