You are probably missing the viewport meta tag in the html head: <meta name=”viewport” content=”width=device-width, initial-scale=1″> Without it the device assumes and sets the viewport to full size. More info here.
Add this to your HTML head.. <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
There are many ways to create the shape with a slanted edge only on one side. The following methods cannot support dynamic sizes as already mentioned in the question: Border triangle method with pixel values for border-width. Linear gradients with the angle syntax (like 45deg, 30deg etc). The methods that can support dynamic sizes are … Read more
Just create a wrapper <div> with a percentage value for padding-bottom, like this: .demoWrapper { padding: 10px; background: white; box-sizing: border-box; resize: horizontal; border: 1px dashed; overflow: auto; max-width: 100%; height: calc(100vh – 16px); } div { width: 100%; padding-bottom: 75%; background: gold; /** <– For the demo **/ } <div class=”demoWrapper”> <div></div> </div> It … Read more
Use the new CSS viewport units vw and vh (viewport width / viewport height) FIDDLE Resize vertically and horizontally and you’ll see that the element will always fill the maximum viewport size without breaking the ratio and without scrollbars! (PURE) CSS div { width: 100vw; height: 56.25vw; /* height:width ratio = 9/16 = .5625 */ … Read more
You can make YouTube videos responsive with CSS. Wrap the iframe in a div with the class of “videowrapper” and apply the following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } … Read more
css3-mediaqueries-js is probably what you are looking for: this script emulates media queries. However (from the script’s site) it “doesn’t work on @imported stylesheets (which you shouldn’t use anyway for performance reasons). Also won’t listen to the media attribute of the <link> and <style> elements”. In the same vein you have the simpler Respond.js, which … Read more
I present to you The Incredible Singing Cat solution =) .wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/ As you move the window bar, you’ll see iframe to responsively resize Alternatively, you may … Read more
There’s another way to do this that doesn’t require redrawing the graph, and it involves modifying the viewBox and preserveAspectRatio attributes on the <svg> element: <svg id=”chart” viewBox=”0 0 960 500″ preserveAspectRatio=”xMidYMid meet”> </svg> Update 11/24/15: most modern browsers can infer the aspect ratio of SVG elements from the viewBox, so you may not need … Read more
Updated 2020… Bootstrap 5 In Bootstrap 5 (alpha) there is a new -xxl- size: col-* – 0 (xs) col-sm-* – 576px col-md-* – 768px col-lg-* – 992px col-xl-* – 1200px col-xxl-* – 1400px Bootstrap 5 Grid Demo Bootstrap 4 In Bootstrap 4 there is a new -xl- size, see this demo. Also the -xs- infix … Read more