Html – Dropdown menu duplicates Hover
I have a problem with the hover event in my metronic dropdown menu, when I have the cursor over the menu button the hover is correct, but when entering the options the menu turns white, I suppose it may be…
Html – scrollwidth and clientwidth remain the same while increasing fontsize
I have this function that increases the fontsize of a container depending on the scrollwidth. But When I print the scrollWidth and clientWidth in the while loop, it stays the same. function adjustFontSize(textField) { let fontSize = 10; // Starting…
Html – How to remove extra whitespace when line breaks
I have a <h4> element like this: <h4 class="hero-title"> <span>Vessel / tank destruction facility</span> </h4> And css like this: .hero-title { background: #000; color: #ffffff; display: inline-block; padding: 20px; max-width: 473px; } Here is the outcome: I want to remove…
Html – Image in header stops scaling when resolution is too small
I'm currently working on a website and I have an image in my header. It's a placeholder right now but the problem is when I shrink the page down to the resolution of a phone, the image stops scaling down…
Html – SVG overlay on background video CSS
Im having trouble having a svg overlay take up 100% width, but modifying the height so it aligns where i need it to so the curve is visible over the video see screenshot. What is the best way to overlay…
Html – Input fields created using React are not editable
I'm learning React and have created a two page application. The first presents the user with a list of customers from a database, with Add, Edit, Delete, View buttons, my 'App.js'. The second presents a "dialog box" using a CustomerForm…
Html – How to partially use a border-radius with an actual border in a progress bar
I have multiple segments in a progress bar, in this example representing two states - achieved and planned values. The planned segment should have a border and nearing the end of the progress bar it should get the same border-radius…
Html – How to position footer to always be at the bottom of the page?
I want my footer to be at the bottom of the page, even when there are not enough elements on the page to push it down. I tried position: fixed with a bottom: 0 but that makes it stay there…
Css – How to make images fit correctly
I am using a BOOTSTRAP 5 carousel. I have images some are portrait and some are landscape. they have differing heights and widths. I have fixed the height of the carousel So that the controls don't jump around as the…
Html – How to prevent child from rotating with parent during the transition?
I'm trying to rotate a parent circle and negate the effect on its children. I tried to negate the effect by using transform: translate(-50%, -50%) rotate(calc(var(--i) * -60deg)) translateY(150px) rotate(calc(var(--i) * 60deg - var(--rotation))) but the children will rotate 60deg…