Responsive CSS square -


using css , not javascript, how make square based on minimum of window's width/height?

i've seen various approaches, want responsive whether you're on typical laptop or mobile device.

jquery can using math.min($(window).width(), $(window).height()) there's got way accomplish via css no?

without text in div, can this:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <style>  div {width: 20%; padding-bottom: 20%; background: #f97e76;}  </style> </head> <body>  <div></div>  </body> </html> 

it's useful if, say, creating gallery, can apply background images boxes. it's not use layout tool text containers, though.

you put text in (although overflow @ small sizes):

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <style>  .outer {width: 20%; padding-bottom: 20%; background: #f97e76; position: relative;} .inner {position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;}  </style> </head> <body>  <div class="outer">     <div class="inner">         <p>this text within div, lots of text that's pretty useless.</p>         <p>this text within div, lots of text that's pretty useless.</p>         <p>this text within div, lots of text that's pretty useless.</p>     </div> </div>  </body> </html> 

Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -