css – Page 24 – Tarik Billa

How to change scrollbar when using Tailwind (next.js/react)

December 19, 2023 by Tarik

Tailwind CSS doesn’t provide a built-in way to customise the scrollbar styling. However, you can use the various ::-webkit-scrollbar pseudo-elements to style it. Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v. @layer utilities { .scrollbar::-webkit-scrollbar { width: 20px; height: 20px; } .scrollbar::-webkit-scrollbar-track { border-radius: 100vh; background: #f7f4ed; } .scrollbar::-webkit-scrollbar-thumb { background: #e0cbcb; border-radius: 100vh; border: 3px solid #f6f7ed; } … Read more

How do I output compressed CSS from Compass?

December 19, 2023 by Tarik

In your config.rb file: output_style = :compressed More at http://compass-style.org/help/documentation/configuration-reference/.

CSS force new line

December 19, 2023 by Tarik

Use the display property a{ display: block; } This will make the link to display in new line If you want to remove list styling, use li{ list-style: none; }

What is the media query for large desktops?

December 19, 2023 by Tarik

The challenges of optimizing for large-scale displays center around how to scale and manage content. You need to assume screen width at certain points. Example: for class “container” @media screen and (min-width: 1400px) { .container { width: 1370px; } } @media screen and (min-width: 1600px) { .container { width: 1570px; } } @media screen and … Read more

Make flex-grow expand items based on their original size

December 19, 2023 by Tarik

Short Answer Switch from flex: 1 to flex: auto. Explanation The flex-grow property factors in two key pieces of data: The free space in the row / column where it is being used. The value of the flex-basis property. Distribution of Free Space The flex-grow property distributes free space in the container among flex items … Read more

how to set multiple CSS style properties in typescript for an element?

December 18, 2023 by Tarik

Try using setAttribute. TypeScript does not have the style property on Element. element.setAttribute(“style”, “color:red; border: 1px solid blue;”); Some related discussion in this GitHub issue: https://github.com/Microsoft/TypeScript/issues/3263

CSS3 animation not working in safari

December 18, 2023 by Tarik

Found the solution. In Safari when you use Keyframes you need to use the whole percentage: this won’t work: @-webkit-keyframes keyarm { 0% { -webkit-transform: rotate(0deg); } 5% { -webkit-transform: rotate(-14deg); } 10% { -webkit-transform: rotate(0deg); } } this will: @-webkit-keyframes keyarm { 0% { -webkit-transform: rotate(0deg); } 5% { -webkit-transform: rotate(-14deg); } 10% { … Read more

IE7 and the CSS table-cell property

December 18, 2023 by Tarik

I’ve solved this using jQuery: $(document).ready(function(){ if ($.browser.msie && $.browser.version == 7) { $(“.tablecell”).wrap(“<td />”); $(“.tablerow”).wrap(“<tr />”); $(“.table”).wrapInner(“<table />”); } }); the above script assumes you have divs using style such as: <style> .table { display: table; } .tablerow { display: table-row; } .tablecell { display: table-cell; } </style>

Why does adding float:left to my css make my link unclickable?

December 18, 2023 by Tarik

The fix is pretty simple and cross browser too, add this (to your unclickable link): #QuestionEditLink, #QuestionHistoryLink { position: relative; z-index: 10; } The fix here is the z-index, but it won’t work if position isn’t relative/absolute/fixed. For more info on z-index see https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Have used this all the time, is simple, works in all … Read more