object-fit, object-positioning and absolute positioning

The image is a replaced element so the use of top/left/right/bottom will not work like it will do with a non-replaced element (a simple div for example). Here is the relevant parts from the specification: https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height To make it easier the computed height/width of your image aren’t defined by the top/bottom and right/left values … Read more

SVG LinearGradient hidden if svg is hidden in seperate class

Either consider a different ID for the gradients: .mobile { display: none; } .content-svg { border: 1px solid black; } <div class=”desktop”> <!– stuff here –> </div> <div class=”mobile”> <svg class=”mobile-svg” height=”150″ width=”400″> <defs> <linearGradient id=”grad1″ x1=”0%” y1=”0%” x2=”100%” y2=”0%”> <stop offset=”0%” style=”stop-color:rgb(255,255,0);stop-opacity:1″ /> <stop offset=”100%” style=”stop-color:rgb(255,0,0);stop-opacity:1″ /> </linearGradient> </defs> <ellipse cx=”200″ cy=”70″ rx=”85″ ry=”55″ … Read more

Bootstrap Grid System new line does not look nice

This is due to varying column height. You need a “clearfix” reset every 3 columns to force even wrapping. One way is to use the approach recommended by Bootstrap, or in this specific case you can use a simple CSS clearfix like this.. @media (min-width:992px) { .auto-clear .col-md-4:nth-child(3n+1){clear:left;} } Demo: http://codeply.com/go/mONLiFj30T For other “clearfix” scenarios … Read more

Overriding CSS properties for a specific html element

That’s a CSS specificity issue. .main_section article has a higher specificity value than .special-bg selector. In terms of value: Inline Style > IDs > Classes, Attributes, and Pseudo-classes > Element Types and Pseudo-elements, So the calculation of Specificity of these two CSS selectors would be: .special-bg Inline Style ID (Pseudo-)Class (Pseudo-)Element 0 0 1 0 … Read more