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
LVL 1
MarisaWeb DesignAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dustin SaundersDirector of OperationsCommented:
So, I'm not sure that your background image is disappearing entirely, but with
background-size: contain;

Open in new window

it may be shrinking off the top to fit.  You can try
background-size: cover;

Open in new window

to see if that helps.

For your text, could put it in a <span> block with
vertical-align: middle;

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David KellyWeb DeveloperCommented:
Looks like you fixed the background image issue?

For the text in the slide:
.tp-caption {
    text-align: center!important;
}

Open in new window

0
MarisaWeb DesignAuthor Commented:
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

MarisaWeb DesignAuthor Commented:
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.
0
MarisaWeb DesignAuthor Commented:
0
David KellyWeb DeveloperCommented:
The only element I see with no background is this guy here:
<div class="main-banner">
   <div class="main-headline-container">
      <div class="main-headline">ALL THE BENEFITS OF GOING FACTORY DIRECT<br>None of the downsides</div>
   </div>
</div>

Open in new window

That's the "homemade" slider yeah? It doesn't have any background applied to it and it's taking over the page at phone sizes, I thought it was going to be removed, when I remove it, the page looks good at small sizes. I'm guessing you have a rather large monitor, or a high resolution laptop cuz I'm seeing that big white banner even on desktop.
0
MarisaWeb DesignAuthor Commented:
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.
0
MarisaWeb DesignAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.