Image and paragraph not dispalying properly on mobile

Question

The image is to far to the right, and the footer goes over the text. This happens when I view the site on a mobile device. What can I do to make this right? Here is the website: 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%;
    }

score 0 · Answer 1 · answered Sep 05 '17 at 10:08

You have positioned the img element absolutely. You want to use normal positioning (the default is static), and centre the element with

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

Here's a codepen. https://codepen.io/NeilWkz/pen/XaQNEN

Image and paragraph not dispalying properly on mobile

1 Answers1