Layout different on other computers?

Question

Layout different on other computers?

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

I have a project and this project was all done from scratch on my PC, however when I took my project to another PC that had a totally different display resolution of mine, the images and certain texts that I put were out of place that they should stay.

Does anyone have a solution to this problem?

Some way that, regardless of the resolution, the images and texts appear in a certain way, because I had a look if there was any solution to this problem and only for Android (Layout on another device ) but I'm working with Windows and as it has a way for Android to have for Windows.

I have tried to put the image in different ways, implementing it in the body of the HTML with the tag "img" and the CSS with the background thinking that my error was in the form of putting the image but independent of the way has been placed this problem remains.

My HTML file:

<div id="image-rodape">
  <img src="imagens/rodape.png" />
  <p class="texto_rodape">By: Matheus Wallace &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy;Copyright,TIPI 02/EBEP Maceió. Todos os direitos reservados.</p>
</div>

My CSS file:

div#image-rodape img {
  position: absolute;
  display: block;
  top: 1235px;
  left: 390px;
  margin-bottom: 10px;
}

NOTE: I'm working on my layout with images, both in the menu part and in the sidebar, in my footer and the texts placed in it are all leaving the place when the resolution of the monitor is different.

Image on my PC:

ImageonanotherPC:

html css

asked by anonymous 08.02.2017 / 01:07

2 answers

1

Hello, the problem is not something a plugin or a code linah will solve. The problem lies in its HTML architecture and CSS definitions. The best thing to do is follow the structure of some front-end Framework, because it will give you all the architecture ready.

I recommend taking a look at Bootstrap: link

If you do not know, you can use some templates: link

17.02.2017 / 12:39

How to select double contacts from a table How to implement unit tests for Clipper?

score 1 · Accepted Answer

You can use the CSS media queries. They are great for giving responsiveness to the layout. I particularly prefer to use them than frameworks.

Here is a basis for various screen types with some comments I've made:

/*

Aqui você coloca o CSS padrão de sempre

*/

.container {
    width: 100%;
} /* Esse será o tamanho padrao da classe container*/






/* A partir daqui são as media queries e as propriedades dos elementos que você colocar dentro das media queries
podem mudar quando a tela for esticada ou diminuída

/* Media Queries */ 
@media screen and (max-width: 83em) {
    .container{
        width: 80%;
    }   /*caso a viewport(janela do navegador) ou tamanho da tela for
        igual ou até 83em (vc também pode usar px se preferir) a classe .container só ocupará 80% da tela*/
}

@media screen and (max-width: 58em) { /*para telas menores ou do tamanho até 58em*/

}

@media screen and (max-width: 49.4375em) {/*para telas menores ou do tamanho até 49.4375em*/

}

@media screen and (max-width: 42.5em) {/*para telas menores ou do tamanho até 42.5em*/

}

@media screen and (max-height: 41.125em) {/*para telas menores ou do tamanho até 41.125em*/

}

@media screen and (max-width: 39.375em) {/*para telas menores ou do tamanho até 39.375em*/

}

@media screen and (max-width: 320px) {/*para telas menores ou do tamanho até 320px (aqui está um exemplo em px)*/

}

This example that I put here fits practically on any screen of any device. The media queries are not just for size. They can change any property. It's like the default CSS, but the elements you put inside the media will have the properties set to it within the media when the screen goes into the size condition.

You can read more about here

Finally, there are also frameworks like Bootstrap that can help you. But if you're just getting started, it's best to learn media queries before moving on to a framework.