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
Post a Comment