Hi I am creating a website and i want to make the navbar sticky but when I set the position to fixed a whitespace of about 40px is created on top of webpage. I tried setting position to sticky and…
.dark-light { display: flex; gap: 0.75rem; border: #555555 solid; background-color: #555555; border-radius: 2rem; padding: 0.31rem; user-select: none; cursor: pointer; align-items: center; width: 3.8em; } .dark-light input { border-radius: 2rem; appearance: none; border: 0; width: 2.4rem; height: 2.4rem; position: absolute; }…
I have a list of links that are horizontal on the homepage of my site. However, while making the site responsive once the screen gets too small, like for mobile devices I want to change it to where the links…
<div class="animate__animated animate__fadeInUp animate__fast" role="alert"> <strong>${alertmsg}</strong> ${msg} <button type="button" class="btn-close" aria-label="Close"></button> </div> how can I make it to fade out after pressing the close button? if I included both animate__fadeInUp and animate__fadeOutUp class, it will just fadeout directly.
What I am trying is, "Your Privacy", Description and buttons should be aligned in same line. HTML: <div class="cookie-notice"> <div class="cn-body"> <h2 id="title">Your Privacy</h2> <p id="id-cookie-notice"><span><span>We use cookies to improve your experience on our site.</span></span></p> <div class="cn-ok"> <a href="#" class="cm-link…
so i am working on a project for my college and I saw a very cool border style that I would like to replicate in my project, but I am having difficulty getting it right. I am using JavaScript, CSS,…
As part of my learning, I have manage to set the background image of my page and change the image every 10 seconds. However, the change between images is harsh with a white background shown before the next image. Is…
In Angular 17, I have a div with the class wrapper-my .wrapper-my { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch width: 100% } .my-class { width: inherit; } // parent component <div class="wrapper-my"> <input type="text" class="my-class"> <app-input-my></app-input-my> </div> And…
I have four rectangles and with a circle inside each one of those rectangles. I'm trying to connect those circles with a dotted line, but the line stops in the middle of the way I'm not sure why. Also why…
I am using subgrid to create card with even spacing. For some reason card adds lot of space between elements and space is different in FF and Chrome. Below is the code based on this tutorial. .wrapper{ margin:0; display:grid; grid-template-columns:repeat(auto-fit,…