How to use the `margin: y x;` shorthand in Tailwind? - css

In Tailwind CSS if I use a utility for calc such as:
right-[calc(-50vw+50%)]
this works as expected. I have some attributes I am trying to add to an element but can't seem to figure out how to get it work using tailwind utilities:
.element {
width: 100vw;
max-width: 100vw;
margin: 0 calc(-50vw + 50%);
}

Use my and mx:
class="my-0 mx-[calc(-50vw_+_50%)]"

Use like below. you use can square brackets to set custom CSS
class="my-0 mx-[calc(-50vw_+_50%)]"

Related

CSS applied to element being overwritten by global css attribute

I am setting the width on an image:
<img class="someImageClass" src="someImage.jpg">
I use the following css styles:
.someImageClass {
max-width: 30px;
}
But I also have a global css style for images as well:
img {
max-width: 100%;
}
The max-width in the someImageClass style is being overwritten by the one that is global and I don't understand why. If I apply the css class directly on the element, it should take precedence over any global style.
try
img.someImageClass {
max-width: 30px;
}
There must be another rule using img.className somewhere. But in normal cases you can calculate the specificity of CSS rules. How is explained here https://www.w3.org/wiki/Inheritance_and_cascade#Specificity
Are you aware of the term important ?
.someImageClass {
max-width: 30px !important;
}

CSS height:auto for all types except SVG

don't know if it is possible, but I'd like to scale all images on my site with the following:
.myClass img {
height: auto;
}
However, all *.svg-files shouldn't match that pattern. Is there a way to do this via native css?
I found something like this:
.myClass img[src$=".svg"] {height: auto;}
But that seems to trigger only for svg-files. Trying to use != seems to be syntactically incorrect.
For this you'll want to refer to the attribute-selector.
Example:
.myclass[src$=".svg"]
Reference;
http://www.w3schools.com/css/css_attribute_selectors.asp
Edit;
Just saw your edit.
In css you can also use a :not(selector)
example:
.myclass:not([src$=".svg"]);
.myClass img {
height: auto;
}
.myClass img[src$=svg i] {
height: 100px;
}
first set height to all images, then reset the setting for all images having src with suffix svg case insensitively

CSS replace value by add pixel to old

i have:
#mydiv { height: 100px; }
i want to change height by replace, but i have to add e.g. 50 px
#mydiv { height: OLD_VALUE + 50px; }
Is it possible without js?
I don't think so. You have to use JS for this.
But you can use margins or paddings to increace distance in certain direction
P.S. In JS you can use +=50px for that
You can use CSS3 calc though you'll need to be wary of support
You can't -- CSS doesn't have any notion of this. While you may be able to do something like using CSS3 variables and calc, it would require the original CSS file to use the variables.
First file:
:root {
var-height: 100px;
}
#myDiv {
height: var(height);
}
Your file:
#myDiv {
height: calc(var(height) + 50px);
}
The best/typical approach to this would be to do it via Javascript, or otherwise something like SASS.

Converting from width to background-width in Less for sprites within CSS class

I'm new to advanced CSS and I've been following this tutorial for generating sprites using gruntjs, spritesmith and less. I'm stuck on how to solve the following problem. Firstly, I generate a .less file containing the information of each image inside the sprite. It looks something like this:
#mobile_logout-x: 1586px;
#mobile_logout-y: 0px;
#mobile_logout-offset-x: -1586px;
#mobile_logout-offset-y: 0px;
#mobile_logout-width: 256px;
#mobile_logout-height: 256px;
Using grunt-contrib-less I can now use the following to get the sprite into my target css:
Less template
.mobile_logout {
.sprite(#mobile_logout);
}
Result
.mobile_logout {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
}
This would be fine if I wanted to use this directly in the HTML, but I'd like to specify this as part of another CSS class. An example would be:
.myTestButton {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
color: white;
background-size: 1.3em 1.3em;
background-position: top right;
}
The problem is at this stage I can't find a way to get the width and height to be represented as background-width and background-height, which is where I am looking to get to.
I've tried changing the values in the sprite.less file to match what I'm looking for, but have found that was a hack that didn't work. Another option I have been considering is having a mixin to return the correct item with the width translated, but because these are generated from less I couldn't get that to fly either.
Just after posting this I looked into where the sprite function came from and found my answer in the generated sprite.less file:
.sprite-width(#sprite) {
width: ~`"#{sprite}".split(', ')[4]`;
}
.sprite-height(#sprite) {
height: ~`"#{sprite}".split(', ')[5]`;
}
The sprite.less file is generated using a mustache template. In order to solve my problem in Spritesmith you can specify a mustache template. It was also incorrect that I was looking at background-width and the property I needed was background-size. My attempts at inlining also failed, and I should have been looking at using a div rather than sizing the sprite component.

Captcha Built-In CSS Issue

The recaptcha i'm using have a built-in css of
#recaptcha_area, #recaptcha_table {
width: 318px !important;
}
I see this when I use firebug.
My problem is
how can I override the built-in width? I've tried to place css code on my stylesheet like
#recaptcha_area, #recaptcha_table {
width: 207px !important;
}
but it doesn't work. Is there other way to override?
You should avoid using !important to override things.
You can't tell the recaptcha what it's width should be; however, you can specify a maximum width instead:
#recaptcha_area, #recaptcha_table {
max-width: 207px;
}
Note thought this might break the recaptcha area.

Resources