Do you have an HTML command that leaves one way on your phone and another on your computer? And do you also have a universal code for the size of the elements?

Question

I’m creating an HTML page for someone special, I believe this person will open the page on mobile, however, my page appears in two different ways on computer and mobile. On the computer she appears all cute, now on the mobile one of the elements goes to the top being that I want it centered on the screen. So I was wondering if there is any code that changes the page only on the mobile, to use the command top: px.

I also wanted to know if you have some "universal" command to put in the size of the element, because I put the pixels according to my monitor, on the monitor of a friend of mine is a part left of the page. Note: I’m already using meta for mobile, my problem is more with the position of the element and not the mobile adaptability.

My code is like this:

Part of the CSS

//carousel com bootstrap//
#myCarousel
{
  width: 100%;
  height: 100%;
  margin: auto;
  display: block;
  position: absolute;
}

//imagem que ocupa a tela//
#Random
{
  width: 100%;
  height: 100%;
  max-height: 626px;
  max-width: 833px;
  margin: auto;
  display: block;
  vertical-align: middle;
}

Obs 2.0: apparently the command vertical-align: middle is not working, because the image was not centered vertically on the mobile.

Edit:

As you can see the page is responsive, my problem is that in mobile the element is there at the top, I want to center it to leave with a better aesthetic.

Answer 1

Hello Eduardo beauty? you can arrange this utulizando flexbox, follow the code..

#myCarousel {
 width: 100%;
 height: 100%;
 margin: auto;
 position: absolute;

 display:flex;
 // O justify-content alinha o item no centro horizontalmente
 justify-content:center;
 // O align-content alinha o item no centro verticalmente
 align-content:center;
}

#myCarousel img {
 width: 100%;
 height: 100%;
 max-height: 626px;
 max-width: 833px;
 margin: auto;
 display: block;
}

And answering your question, yes, to define different styles on different devices we use the medias querys, the example of the code below does the following: Changes the background of #myCarousel to 'red' only if the screen of the device has at most 763px, ie on mobile..

@media screen and(max-width:763px){
 #myCarousel {
  background: red;
 }
}

The code below does the following: Changes the #myCarousel background to 'green' only if the device screen has at least 764px, IE on the tablet or desktop..

@media screen and(min-width:764px){
 #myCarousel {
  background: green;
 }
}

See the code on codepen

Answer 2

I don’t understand very well, but try adding on each HTML page:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

CSS

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}