html

How can I make my boxes scale accordingly when the browser is resized  #angularjs #reactjs

  • Try using “@media screen and (max width: YourSize px) { [Your new css rules…
  • I have also tried a percentage as a height, but the box just disappears.
  • The best thing to do is to change their content’s size, or their heights in px for different screen resolutions.
  • @S.Serp the width of the boxes is relative of the screen, when the browser is resized, but the height is not.
  • To scale divs proportionally you would need to set the height to 0 and assign a padding-bottom in percentage (relative to the width).

My boxes at present work and display on the page as I would like, (they will eventually contain a pic and a description) but as of now they aren’t responsive in that they scale down in size accordinly, to maintain the width to height ratio I have specified.

@ng_real_ninja: How can I make my boxes scale accordingly when the browser is resized #angularjs #reactjs

My boxes at present work and display on the page as I would like, (they will eventually contain a pic and a description) but as of now they aren’t responsive in that they scale down in size accordinly, to maintain the width to height ratio I have specified.

CSS:

. I have also tried a percentage as a height, but the box just disappears.

, how can I make it so my boxes scale down accordingly?

#pageArea { display: block; margin: 5px auto; max-width: 1200px; position: relative; } .projectListingLarge { width: 42%; padding-bottom: 60%; height: 0; margin: 0 3% 5% 0; background-color: blue; float: left; } .projectListingSmall { width: 25%; padding-bottom: 30%; height: 0; float: left; margin: 0 3% 5% 0; background-color: green; } .mS { margin-top: 500px !important; } .right { float: right !important; } .clearBoth { clear: both; height: -1px; display: block; }

Setting height as percentage usually won’t help, and that’s not just limited by scaling your browser but because most browsers don’t relate it to screen size. The best thing to do is to change their content’s size, or their heights in px for different screen resolutions. Try using “@media screen and (max width: YourSizepx) { [Your new css rules…] }”

html

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.