How to make a program fit on all device size in css and html

Ask coding questions

How to make a program fit on all device size in css and html

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 (240) [earned 5 cycles]

View Answer

Voters

Comments

hot new top

set the width to a percent :)

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

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

@pepelaugh ok ill check it out

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

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

@Coder100 ok

You could use the builtin window height and window width

@RYANTADIPARTHI how would I set that up

@MikeJMS8910 maybe like this:

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

function resizeWindow() {
  myWindow.resizeTo(250, 250);                             
  myWindow.focus();                                        
}

like that.

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

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

@pepelaugh I know, i am using css

@MikeJMS8910 ok, css here.

link:

https://stackoverflow.com/questions/3652591/full-height-and-full-width-css-layout/3652941

@MikeJMS8910 i was talking about @.RYANTADIPARTHI

@pepelaugh ok