asked on

How can I keep my watermark from creeping further to the center?

I've got a media query that looks like this:

@media (min-width: 768px) and (max-width: 991px) {
            .watermark {
            position:absolute;
            margin-left:45%;
            margin-top:28px;
      }

}

As long as we're at 991 px or something within 50 px, it's positioned in the lower right hand corner exactly where I want it to be. But as we get closer to to 768px, it starts to drift closer to the center and it begins to look more and more like a mistake.

Is there a better way to ensure that the watermark stays fixed in the right hand corner? Or, do I have to create additional media queries to accommodate the dimensions within the range of 768 and 991?

ASKER CERTIFIED SOLUTION

Neil_Bradley

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bruce Gust

ASKER

Hey, Neil!

Here's the page: https://nex_form.ezonlineregistration.net/.

You're correct in that I do have a percentage, but how do I change what's happening with a specific pixel variable and not run into the same thing as the browser size changes?

I'm thinking I need more media queries, but let me know your thoughts!

Thanks!

Bruce Gust

ASKER

Neil! I got it done! I just put the absolute div within a <div=col-xs12> which is relative by default which now gives me a fixed point of reference. Once I did that, everything worked the way I needed it to!

Thanks!

Neil_Bradley

Great job!!