Need some CSS help and advice for divs and media queries
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.)
1080.PNG
1440.PNG
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.)
1080.PNG
1440.PNG
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
No, I was able to fix absolutely nothing. That being said, I was busy with other things and haven't tried the first suggestion yet. I will tomorrow.
As far as the tp-cation thing, I feel dumb now. The issue I was having with the text align was that when I go in here, https://www.stadriemblems.com/static/revolution/css/layers.css there are a billion tp-caption styles, so I had no idea which one to edit. But css reads from the top down, so all I add to do was add that to the page to make it override the master settings. Duh.
As far as the tp-cation thing, I feel dumb now. The issue I was having with the text align was that when I go in here, https://www.stadriemblems.com/static/revolution/css/layers.css there are a billion tp-caption styles, so I had no idea which one to edit. But css reads from the top down, so all I add to do was add that to the page to make it override the master settings. Duh.
ASKER
Oh, and just for the record, the background image is disappearing entirely for me when I make the viewport smaller. See attachment.
I will try the first suggestion first thing tomorrow. Thanks for the help.
I will try the first suggestion first thing tomorrow. Thanks for the help.
ASKER
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes, that is the crude first draft of my homemade one. The background is set in css inside of enamel.css.
I have a dual monitor setup. My main one is 1440 and my auxiliary one is 1080, and the background image shows up in the initial maxiized state of each.
The reason the dive takes up the entire space is because of the 1404px height I have on it.
After trying to deal with a homemade one, I'm starting to wonder if I should just stick with the original rev slider and just deal with it not doing exactly what I want with text but being close enough. I'll decide tomorrow with fresh brain. Sorry for all the back and forth.
I have a dual monitor setup. My main one is 1440 and my auxiliary one is 1080, and the background image shows up in the initial maxiized state of each.
The reason the dive takes up the entire space is because of the 1404px height I have on it.
After trying to deal with a homemade one, I'm starting to wonder if I should just stick with the original rev slider and just deal with it not doing exactly what I want with text but being close enough. I'll decide tomorrow with fresh brain. Sorry for all the back and forth.
ASKER
Sorry for the headache. I decided that I can live with the annoying things about the original rev slider and am just going to stick with that. Thanks for the help.
For the text in the slide:
Open in new window