HTML layout broken in different screen reselution

[W1ll1aming]

i have viewport 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ive tested it on 1920x1080 got desired result, then on a 1518 x 853 lenovo chromebook N23 Yoga and i get a completly broken html that does not fit my display?

 

fixes?

Please help!

index.html style.css

[myselfolli]

What exactly is your problem? Can you show screenshots?

[homeap5]

It's not viewport problem. Is how rest of your code is made.

[W1ll1aming]

5 hours ago, homeap5 said:

It's not viewport problem. Is how rest of your code is made.

how can i fix it

[homeap5]

8 minutes ago, ughiwanthackintosh said:

how can i fix it

Don't know exactly what is wrong.

That right side?

 

So try change .tdiv in css to this:

.tdiv
{
margin-top: -120px;
margin-right: 10px;
margin-left:auto;
width:200px;
color: grey;
font-size: 15px;
}

But this is only partial solution (until your screen is big enough; if not, you must hide that dif for smaller width of screen using more complex css).

[LogicalDrm]

Use adaptive scaling instead of set pixel values.

[W1ll1aming]

4 hours ago, LogicalDrm said:

Use adaptive scaling instead of set pixel values.

and how exactly do i do that, ive googled it but cant understand it.

[LogicalDrm]

8 hours ago, ughiwanthackintosh said:

and how exactly do i do that, ive googled it but cant understand it.

Either by using percentage of full page width for sizes. There's another way, but I don't remember it now. You can learn much of it from W3Schools https://www.w3schools.com/html/html_responsive.asp

 

I re-learned HTML/CSS last spring in school, so it's not too hard.