图片和段落在手机上没有正确显示

问题描述：

图像偏右，页脚翻过文本。当我在移动设备上查看网站时会发生这种情况。我该怎么做才能做到这一点？这里是网站： www.ferskvaregrossisten.no图片和段落在手机上没有正确显示

img{ 
     width:100%; 
     width:150px; 
     length:150px; 
     -webkit-transform:rotate(270deg); 
     -moz-transform: rotate(270deg); 
     -ms-transform: rotate(270deg); 
     -o-transform: rotate(270deg); 
     transform: rotate(270deg); 
     position:absolute; 
     left:690px; 
     top:320px; 
    } 

    footer { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: #efefef; 
    text-align: center; 
    width:100%; 
    } 

    p{ 
     height: 40%; 
    width: 100%; 
    display: flex; 
    position: fixed; 
    align-items: center; 
    justify-content: center; 
    font-size: 18px; 
    width:100%; 
    }

答

你绝对定位的img元素。你想使用正常的定位（默认是静态的），并将元素居中对齐

img{ 
    display:block; 
    margin: 0 auto; 
    // I added the following rules to constrain the size of the image 
    max-width: 300px; 
    height: auto; 
}

这是一个codepen。 https://codepen.io/NeilWkz/pen/XaQNEN

图片和段落在手机上没有正确显示

相关推荐