media queries, image won't move

user_14960565 0
Viewed 123

this is a screenshot of my website

Hi! I am currently learning front end developing languages. I want to move my image to where the div.kitchen-image container is... but it will not move. My code at queries is this:

    /*media queries*/
    
    @media only screen and (max-width: 600px) {
        nav{
            display: flex;
            flex-wrap: wrap;      
            line-height: 2;
        }
        .logo {
            margin:0 auto;
        }
        .nav-links ul li a{
            margin-left:15px;
            
        }
        .kitchen-image {
            height:200px;
        }
        .main-pic{
            width:400px;   
        }
    }

tried changing the width and height of the image itself, but still no result.

responsive-design flexbox css html
1 Answers

You can use the CSS property transform: translate() use this CSS in the Image's class

eg: The co-odinates given below are just an example.

.kitchen-image {
        height:200px;
        transform: translate(50px, 100px);
    }
user_147399480
Related