i am trying to manually write some css that simply involves a banner image with some text overlaid. Turns out it's not a simple as I thought. I'm only onto the second media query, and I'm running into trouble. Mostly because I'm stuck in the intermediate level of css and have not yet advanced to expert.
Here is the page: https://www.stadriemblems.com/products/enamel-pins-test/
The css is here, but you can also find it by viewing the source of the page: https://www.stadriemblems.com/static/css/enamel.css
Right Now it's only going to display in the initial desktop viewport size, so you son't be able to help me if you're on a mobie device.
Here are some problems I am running into right off the bat.
I want the text to be centered vertically. It sort of seems like it's working, but it isn't exactly. See the two image attachments for how it looks on my 1440 monitor and how it looks on my 1080 monitor.
That also leaves the issue of height. I have the height set to be a static 1440px at the largest size, but because there is a background image, and without a set width, there's nothing to expand the div. I have the width set to 100% and the background set at "contain" but I guess all those things aren't compatible. I guess I need some advisement as to what to do in this situation.
Basically, my end result is that for all media queries, I want the image to always be 100% width with a proportional height, and for the text to always be vertically centered and fit nicely on the image.
Oh, and also, why is the background image disappearing completely as soon as I change the viewport to a slightly smaller size?
(PS: Ignore the repeat of the image underneath it that is being rendered via Revolution Slider. I couldn't make that thing do what I needed, so I decided to manually code it myself.)