How to style a div to be a responsive square? [duplicate]
Works on almost all browsers. You can try giving padding-bottom as a percentage. <div style=”height:0;width:20%;padding-bottom:20%;background-color:red”> <div> Content goes here </div> </div> The outer div is making a square and inner div contains the content. This solution worked for me many times. Here’s a jsfiddle