I want to wrap two spans with an icon in one line with CSS but it works only when I make the screen bigger. Is there any solution to have it working all the time? <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <i class="fas…
I want to assign several @mixins to classes with the same name, something like: @each $herramienta in $listaHerramientas { .#{$herramienta} { @include #{$herramienta}; } } The compiler throws the error Expected identifier, which seems to mean the @include does not…
Row 1 should always be the height of its content + 1 share of the remaining available space Row 2 should always be the height of its content Row 3 should always be the height of its content + 2…
I'm trying to display social media icons using entypo.css. For some reason it is working in my development space but when I pushed to production I am getting empty boxes where the icons should be. Example is in the footer…
I'm trying to convert a Markdown file containing a simple bar chart created with inline HTML and CSS to an HTML file using Pandoc. The Markdown preview in Visual Studio Code displays the chart perfectly fine, but the output from…
So I just began my programing journey, and in the course that I'm in, I just got tasked with fixing a broken website by myself without the course guidance. I was excited to test myself with what I had already…
I'm working on a portfolio project and I'm running into errors I don't understand. I just completed the responsive design for 480px and 768px screens. Here is the link to the site: https://tranthanhhthao.github.io/swinburne-contact/ Using the computer Chrome browser everything looks…
Consider I have this simple div: <div class="diamond"><span class="material-symbols-outlined" id="locks">lock</span></div> The CSS for this is below: .rotate-and-change { transform: rotate(360deg); } .diamond { aspect-ratio: 1 / 1; margin: 0px -2px; background-color: #f44336; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0%…
This is what it looks like on Chrome This is what it looks like on Firefox Here is my CSS chunk: .color-legend { width: 100px; height: 20px; background: linear-gradient( to right in oklch decreasing hue, oklch(100% 0 9) 6% 6%,…
When you click on a button in the mobile browser emulation, the button remains highlighted. When you click on a button On the desktop version of the browser, everything works correctly. How to fix this? .button-coontainer { display: flex; height:…