Should hover:scale e.g. hover:scale-125 work on <a> elements when using tailwind CSS.
I'm running a Django project... it works on <div>'s <img>'s and other elements but not on <a>...
It that how it is or is something wrong with my tailwind css?
Thanks!
tested this scale on other elements and it worked, but it doesn't on <a> elements
Anchor tag is an inline element and cannot be scaled
img is also inline element but Tailwind set display: block property on images in preflight styles
In order to take effect you should other display property - like inline-block, block, flex etc
See DEMO
Related
I'm trying to use whitespace-pre-line to show multiline strings, although it is not respecting the height of what it requires, instead it messes up the alignment of any items following it?
I've created a playground example:
https://play.tailwindcss.com/s3ZMXnUihZ?layout=horizontal
Fixed it by adding overflow-auto helper class for (overflow: auto;) css rule to the parent (p) tag of the span.
I want to style ng-container like add borders when on hover or show a button inside this tags on hover but this isn't possible. ng-container doesn't seem to be responsive to styling. Is rendered on DOM and if not what can I use to access it?
According to Angular official docs <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM. It's only meant to be used as a container for structural directives when you need some HTML elements immediate children to be of a specific type. For styling you would have to go with regular elements instead.
I'm trying to set an h3 tag to be inline, but no matter what rule I use in CSS, the box model in Inspector is displaying display: block.
.widget_title {
display:inline;
float:left;
}
Any ideas to why this is?
That looks simple: you use float property on inline element which forces inline element to become a block element.
Read this CSS specs to learn more.
Essential part is here:
left
The element generates a block box that is floated to the left.
Content flows on the right side of the box, starting at the top
(subject to the 'clear' property).
When you use float, position absolute or fixed on an element you force this element out of the normal flow. When an element is out of the normal flow, display: inline or inline-block for that matter, do not make any sense. This is why elements out of the normal flow are considered as block elements, whatever their display css property is.
This is an old but interesting article about floats.
I don't know why but when I set my CSS for an <img> to display: inline it works fine.
But then I wrote display: block; and it was stretching the link wrapped around the element, across the entire screen.
Block elements take up the full width available, with a new line before and after since the anchor tag is enclosing it it is also going full width.
Inline elements take up only as much width is needed and doesn't force new lines.
To fix it, you should wrap your "my work on instagram" anchor tag and image in a div, which is a block element, and it will not stretch the internal elements. Also, remove the display:block from your instawork class in your css. JSFiddle Example
<div><img src="http://www.pauldewar.me/imgs/instawork.png"></div>
Reference: CSS Blocks vs Inline CSS Display Styles
I know how to use background images and their position on an anchor element (using :hover). It's my understanding that ie6 doesn't support button:hover. How can I achieve this effect using only css?
IE6 only supports the :hover pseudo class on anchor elements. That means, just like everything else, you have to get a bit creative if you want to achieve this effect.
You'd possibly achieve a hack of this by starting with using conditional comments to include an IE6-specific style sheet for your page / site.
You could then either use a background image that looks the same as your button's background and set an anchor tag to use that background image with the image's correct fixed width, or (untested so not sure about this one) try wrapping the button in an anchor tag.