3
I’m with 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 monitor resolution totally different from mine, the images and certain texts I put were out of place.
Does anyone have a solution to this problem?
Some way that regardless of the resolution the images and texts appear in a certain way, I had to take a look if I had any solution to this problem and have only for Android(Different layout on another device) but I am working with Windows and as has a way for Android can have for Windows.
OBS:I have tried to put the image in different ways, implementing it in the HTML body with the tag "img" and by the CSS with the "background" thinking that my mistake was in the way to put the image but regardless of the way this problem was posed.
My HTML file:
<div id="image-rodape">
<img src="imagens/rodape.png" />
<p class="texto_rodape">By: Matheus Wallace ©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;
}
OBS2: 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 them are all leaving the place when the resolution of the monitor is different.
Image on my PC:
Image on another PC:
You have to use Media Queries so that the behavior of the elements and the necessary changes in the CSS styles are made according to the size of each screen.
– Chun
I had no idea of this Media Queries however I’m beginning to understand now, and from what I understand the Queries as you said they make changes to CSS files but on sites like stackoverflow the elements do not seem to change, open the stack site in a netbook I have and visually is added to feathers the horizontal and vertical scrollbars without causing the elements of the site suffer changes, in this case to get a result equal to that of this site can also be done only with Media Queries ?
– Lone Tonberry
This link can help you: http://answall.com/questions/112116/comor- tentar-deixarum-site-compatibiel-com-principais-browsers
– Gilmar Santos
This one tbm: http://answall.com/questions/104798/meu-site-fica-bagunçado-no-microsoft-edge-firefox-e-no-safari-comoresolver-es
– Gilmar Santos
You managed to solve your problems?
– Gilmar Santos
Since the friend said you need to use Media Queries I just took a quick look at the subject and that seems to be it, I’m going to have to take some time to study about, but I’m still not sure that will meet my needs and on the links you posted did not serve because according to the method that the staff spoke of Bootstrap do not need to use this method.
– Lone Tonberry
Try pure CSS (kind of confusing, but it works lul) Link
– Vitor Adriano
Instead of using pixel with Paramento, work with percentage, thus adapting the devices of various resolutions.
– Patrick Souza