Skip to main content
Search IntMath
Close

450+ Math Lessons written by Math Professors and Teachers

5 Million+ Students Helped Each Year

1200+ Articles Written by Math Educators and Enthusiasts

Simplifying and Teaching Math for Over 23 Years

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.

Heights, widths and re-size for SVG applets

These are experiments to set widths and heights for interactive applets, allowing for various size screens. It also tries to cope intelligently with screen re-size.

Best square - (max 450px w×h)

Don't use class="square" (set height of SVG and thus div by javascript).

.max_w_450{margin:0 auto;width:100%;max-width:450px;max-height:450px}
.vmin{margin:0 auto;max-width:calc(100vmin - 1em)}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .vmin{max-width:100%}
}

Best rectangle (75% wide, max 450px high)

This is the best rectangle, responding to browser height and width. Uses max_w75pc_h450, but DON'T use ht100pc:

.max_w75pc{margin:0 auto;max-width:75%}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .max_w75pc{max-width:100%}
}

Best empty square

This is the best (empty) square, responding to browser height and width. Uses max_w_450, vmin, square:

/* same as best square, PLUS .square **/

.max_w_450{margin:0 auto;width:100%;max-width:450px;max-height:450px}
.vmin{margin:0 auto;max-width:calc(100vmin - 1em)}
.square{
	box-sizing:border-box;
	width:100%;
	padding-bottom:100%;
}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .vmin{max-width:100%}
}

Best empty rectangle

This is the best (empty) rectangle, responding to browser height and width. Uses max_w75pc_h450, ht100pc:

/****** BEST EMPTY RECTANGLE - max width 75%; 1.288 ratio*****/

.max_w75pc_h450{margin:0 auto 2em;max-width:75%;height:75vh;max-height:450px}
.ht100pc{height:100%}
@media screen and (max-width: 479px) {
  #content{padding:0}
  .max_w75pc_h450{max-width:100%}
}
@media screen and (max-height: 510px) {
  .max_w75pc_h450{height:calc(100vh - 3em)}
}
max_w75pc_h450, ht100pc: best rectangle

Fail: max width 450 square

max_w_450 too high for phone landscape
bleeds over following text

Fail: Fill the screen

maxWidthHt, ht100pc (fill screen, but too big for desktop)

Fail: max width 75%

max_w_h_75pc, ht100pc: too high for desktop
/*********** FAILS *********************/

.maxWidthHt{width:100%;margin-bottom:2em;max-width:calc(100vw - 3em);height:calc(100vh - 3em)}
.max_w_h_75pc{margin:0 auto 2em;max-width:75%;height:75vh}
.interactive svg{box-sizing:border-box}


.vminEmpty{max-height:calc(100vmin - 3em);margin-bottom:2em}

@media screen and (max-width: 479px) {
  #content{padding:0}
  .max_w_h_75pc{max-width:100%;height:75vh}
  .max_w75pc_h450{max-width:100%}
  .max_w75pc{max-width:100%}
  .vmin{max-width:100%}
  .maxWidthHt{max-width:100%}
}
@media screen and (max-height: 510px) {
  .max_w75pc_h450{height:calc(100vh - 3em)}
}
/*****************************************/

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.