Tumblr Thème semble différent sur une résolution d'écran différente

Question

J'ai donc créé un Tumblr Thème pour mon nouveau groupe de jeu de rôle là-bas. C'est génial pour moi! Mais beaucoup de gens ont dit qu'il semble très désorganisé avec des boîtes flottantes dans des espaces aléatoires. J'étais évidemment très confus alors j'ai demandé des captures d'écran. Nous avons compris que le problème est différentes résolutions d'écran. Existe-t-il un moyen de résoudre ce problème et de faire en sorte que mon thème soit le même sur toutes les résolutions utilisant le HTML (ou CSS ou JS)?

C'est ce que I voir.

C'est ce que d'autres personnes voient

Answer 1

La première chose que je peux penser sans voir le code est le format qui est utilisé sur la hauteur et la largeur.

Vous utilisez des pixels ou% droit? Eh bien, si oui ajouter ceci: (Il est nécessaire pour que cela fonctionne)

<style> 
html,body{min-width: 100vw; max-width: 100vw; min-height: 100vh; max-height: 100vh;} 

Lorsque cela est fait, changer toute la largeur et la hauteur et la taille de la police à 1-100vw et 1-100vh (1 = 1% de la fenêtre) Si vous ne l'avez pas encore fait, vous devez donner à tous les divs/boutons etc. une position absolue.

Ajouter ths à chaque div etc. CSS:

top: 0px; 
left: 0px; 
position: absolute; 
Transform: translate(1-100vw,1-100vh); 

Cela rendra le cornor supérieur gauche pour être le point d'ancrage pour les divs. Avec le Transform: translate vous pouvez le déplacer comme vous le souhaitez. Si vous le faites comme ça, vous serez sûr que je serai toujours le même sur n'importe quel écran :-)