css – Make Me Engineer

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

How to encrypt HTML, CSS and JavaScript to prevent copyright infringement [duplicate]

That’s not possible; you should copyright your code instead if you are worried. Or you may want to have a look at: Obfuscated Code

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

React force background color full height

Instead of using height:100% you may try height:100vh. Using % is relative to the parent height but using vh is relative to the height of the viewport. So making 100vh will ensure that the block fill all the height of the screen. You can read more about here

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

CSS3 combining selectors with OR instead of AND

You’ll need to split them up using a comma: body[class*=”page-node-add-“], body[class~=”page-node-edit”] {background:red;} The problem with using a comma: … is that you can’t do it any other way than with a comma. Perhaps it could have been remedied with Selectors 3, but unfortunately the spec says otherwise. That is only going to be remedied by … Read more

Do we have to use non-standard/browser specific CSS vendor prefixes anymore?

It really depends on which features and which browsers you want to fully support. Even now some browsers are lagging. Here is a really excellent guide: http://caniuse.com/

Using attr to set css variable inline that work with CSP

Not yet. In the same link you can read: Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. Still no browser support the attr() for properties different than content and also no support for the type-or-unit. … Read more

How do I extend a class/mixin which has dynamically formed selector

Extending a dynamically formed selector (loosely using the term) like that is currently not possible in Less. There is an open feature request to support this. Till it is implemented, here are two work-around solutions to it. Option 1: Write the contents of .hello and .hello-world selectors into a separate Less file (say test.less), compile … Read more

+ More