To solve your issue, you simply need to get and store the size of the div in a component property after each resize event, and use that property in the template. This way, the value will stay constant when the 2nd round of change detection runs in dev mode. I also recommend using @HostListener rather … Read more
This can be done with Level 4 Media Queries: (Browser Support is quite good – CaniUse) Interaction Media Features The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets) The pointer media feature queries the quality … Read more
ya as your html is same you can change the styles for the css properties according to the media query a better solution would be- fiddle @media only screen and (min-width: 769px) { #content { border:1px solid; border-collapse:collapse; } #content td, #content th { border:1px solid; text-align:left; padding:.07em .2em; white-space:nowrap; font-weight:400; } } @media only … Read more
You don’t need @media queries for this. This is my try, pure CSS: .x1 { overflow:hidden; } .x1 .x2 { display:block; float:left; padding: 12.5%; width:auto; height:auto; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -khtml-border-radius: 50%; background:#eee; text-align:center; position: relative; } .x1 .x2 span { position: absolute; width: 100%; left: 0; top: 48%; line-height: 1em; height: 1em; font-size: 100%; overflow: … Read more
I’d recommend taking after Twitter’s Bootstrap with just these four media queries: /* Landscape phones and down */ @media (max-width: 480px) { … } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { … } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { … } /* … Read more
Using CSS {height: 100%;} matches the height of the parent. This could be anything, meaning smaller or bigger than the screen. Using {height: 100vh;} matches the height of the viewport. .container { height: 100vh; overflow: auto; } According to Mozilla’s official documents, 1vh is: Equal to 1% of the height of the viewport’s initial containing … Read more
Adaptive layouts (Responsive layouts) consists of the following three factors: 1. Flexible Layouts: The divs you use to create your web page layouts need to consist of relative length units. This means you shouldn’t use fixed widths in your CSS, rather use percentages. The formula to convert sizes from a design to percentages is (target/context)x100 … Read more
Reordering elements of unknown heights in a responsive fashion is best done with Flexbox. While support isn’t great for desktop browsers (IE being the primary limiting factor here, support starts with v10), most mobile browsers do support it. http://cssdeck.com/labs/81csjw7x @media (max-width: 30em) { .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; … Read more
For a more explained procedure see How to use Twitter Bootstrap 3 for non-responsive site From Bootstrap documentation (plus some explanations): To disable responsive features, follow these steps. See it in action in the modified template below. 1) Remove (or just don’t add) the viewport <meta> mentioned in the CSS docs self-explanatory 2) Remove the … Read more
The parent div can not use height:auto when its children are positioned absolute / fixed. You would need to use JavaScript to achieve this. An example in jQuery: var biggestHeight = 0; // Loop through elements children to find & set the biggest height $(“.container *”).each(function(){ // If this elements height is bigger than the … Read more