Skip to content
← Back to Community
How to make a program fit on all device size in css and html
Profile icon
Michael8910

I created a code in html, css, and javascript but noticed that sometimes the design could be all messed up depending on the size of the device. So is there anyway I can make it fit on all screen sizes?

Answered by badst [earned 5 cycles]
View Answer
Voters
Profile icon
lauratormey
Profile icon
EpicCoderGuy1
Profile icon
Michael8910
Comments
hotnewtop
Profile icon
badst

set the width to a percent :)

Profile icon
Michael8910

@pepelaugh I did that but the font is the thing that is really messed up because you cant give a percent for that

Profile icon
badst

@MikeJMS8910 ? font-size and vw
see https://css-tricks.com/viewport-sized-typography/

Profile icon
Michael8910

@pepelaugh ok ill check it out

Profile icon
Baconman321

If you really can't use percentages and such, you could use a media query. More here!

Profile icon
Coder100

sure, you can add breakpoints so you can change the styling on different sizes. This is what most developers use anyways.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

btw this is called responsive design

Profile icon
Michael8910
Profile icon
RYANTADIPARTHI

You could use the builtin window height and window width

Profile icon
Michael8910

@RYANTADIPARTHI how would I set that up

Profile icon
RYANTADIPARTHI

@MikeJMS8910 maybe like this:

function openWindow() { myWindow = window.open("", "", "width=100, height=100"); } function resizeWindow() { myWindow.resizeTo(250, 250); myWindow.focus(); }

like that.

Profile icon
Michael8910

@RYANTADIPARTHI but I would want it to fit 100% and all of the window sizes could be different

Profile icon
badst

@RYANTADIPARTHI wtf.... use css for this not js.

Profile icon
Michael8910

@pepelaugh I know, i am using css

Profile icon
RYANTADIPARTHI
Profile icon
badst

@MikeJMS8910 i was talking about @.RYANTADIPARTHI

Profile icon
Michael8910