I can't move an image when it comes to responsive design CSS

So I have a nav bar on top, with 1 logo, 3 text elements and 1 button. The thing is, when I make it smaller I want the button to be gone, the element text to remain in place, and the logo to go on the bottom right screen.

I did most of the things, but I can’t make the logo go where I want. My code looks like this :

<header>    

        <img class="logo" src="/Assets/Logo.png" alt="logo">

        <nav>

            <ul class = "links">

                <li><a href="#">Home</a></li>

                <li><a href="#">Recipes</a></li>

                <li><a href="#">About</a></li>

            </ul>

        </nav>

        <a class="cta" href="#"><button>Youtube</button> </a>

       

    </header>

And the CSS

@media screen and (max-width: 499px) {

    .logo {

        position: fixed;

        bottom: 0;

        right: 0;

        width: 300px;    

    }

  }

The thing is, the logo gets fixed on the TOP right corner instead of the bottom one. What am I doing wrong?

What do you mean by the bottom right screen, the bottom right of the viewport?

Its position is relative to the viewport, or an ancestor with a transform value other than none. Does one of the ancestors have transform on it?

You likely will have to post a live example on something like Codepen so we can see what is going on.

Codepen https://codepen.io/PhantasmPNT/pen/ZEXeBGx

Can’t believe I found the solution. The problem was that I already have another media query to the image with other settings and yea…I’m stupid.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.