2017-09-04 125 views
-2

圖像偏右,頁腳翻過文本。當我在移動設備上查看網站時會發生這種情況。我該怎麼做才能做到這一點? 這裏是網站: 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%; 
    } 

回答

0

你絕對定位的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