-1

So I created a Tumblr Theme for my new roleplay group there. It looks GREAT for me! But a lot of people have been saying that it looks very disorganized with floating boxes in random spaces. I was obviously quite confused so I asked for some screenshots. We figured out that the problem is different screen resolutions. Is there a way to fix this and have my theme look the same on every resolution using HTML (or CSS or JS)?

This is what I see.

enter image description here

This is what some other people see

enter image description here

Ally B
  • 41
  • 1
  • 7
  • This question is way to broad for a helpful answer. Your Page seems to have relative width's, which will result in different looks on different screens (have you tried mobile yet?). Take a look at responsive Design, and if you have trouble with an specific Problem, show us some code, and we are here to help – Matthias Seifert Jul 25 '17 at 06:14

1 Answers1

0

The first thing i can think of without seeing the code is the format which is used on Height and Width.

You are using either pixels or % right? Well if so add this in: (It's required for this to work)

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

When this is done, change all width and height and font-size to 1-100vw and 1-100vh (1=1% of the viewport) Also if you haven't done already, you should give all divs/buttons etc. an absolute position.

Add ths to every div etc. CSS:

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

This will make the upper left cornor to be the anchor for the divs. With the Transform: translate you can move it around as you like. If you do it like this, you will be sure that i will always look the same on any display :-)

D3nj1
  • 95
  • 10
  • Thank you so much!!! :D I'll be putting all that in tomorrow and I'll let you know how it goes!! :D – Ally B Jul 25 '17 at 06:41
  • So you said to switch the top, left, and font-size, how about do I, like, convert fontsize from px to vw or vh? Roughly speaking. – Ally B Jul 26 '17 at 00:33
  • Here is an example of some of my CSS: `.Div_log {height: 4vh; width: 15vw; top:0px; left: 0px; position: absolute; font-size: 1vw; transform: translate(15vw, 7.8vh);}` I just read the answer again, and yeah sorry it was a bit hard to understand without an example xD – D3nj1 Jul 26 '17 at 07:34
  • Remember to choose this as the Answer so others can find it and use it ^^ – D3nj1 Jul 26 '17 at 12:49