媒体查询，图像不会移动

Question

this is a screenshot of my website

嗨！我目前正在学习前端开发语言。我想将我的图像移动到 div.kitchen-image 容器所在的位置...但它不会移动。我的查询代码是这样的：

    /*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;   
        }
    }

尝试更改图片本身的宽度和高度，但仍然没有结果。

Answer 1

您可以使用 CSS 属性 transform: translate() 在图像的 class

中使用此 CSS

例如：下面给出的坐标只是一个例子。

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

媒体查询，图像不会移动

media queries, image won't move

html

css

flexbox

responsive-design