Hello,

For the first part of my website, the user lands on an responsive image that takes the full screen:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 30px;
}

.intro {
  height: 100%;
  width: 100%;
  margin: auto;
  background: url(back.jpg) no-repeat 50% 50%;
  display: table;
  top: 0;
  background-size: cover;
}

.intro .inner {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  max-width: none;
}

Then, the user can scroll down to see the rest of the website but I used "position:absolute;" for every element, which means that the rest of my website isn't responsive and is misplaced when the size of the window changes.

For example, this is how I placed one text: 

 .text {
   font: bold;
   font-family: 'Montserrat', sans-serif;
   color: #232323;
   font-size: 140%;
   position: absolute;
   margin-left: auto;
   margin-right: auto;
   transform: translate(-50%, -50%);
   top: 950px;
   left:50%;
   margin: 0;
   cursor: default;
 }

Could anyone give me a solution to make the rest of my website responsive? I only need it to be responsive in terms of height, not width.

Thanx

Bonjour,

Mauvais forum

Le sujet est déplacé de la section HTML / CSS vers la section Let's talk!