I would like my double border with one line shorter than the other left and right. the left is current only 1 line missing the smaller one .double-border { --b: 2px; /* thickness */ --c: #3CD5AF; height: 100%; border-right: var(--b)…
I am currently attempting to make a simple header with HTML and CSS. I have encountered a problem where my button list is not floating to the right, giving the site an odd appearance. I tried floating the list to…
I am trying to align content in a table column, across multiple cells and rows, so that they are centered blocks and then left aligned inside that block. I have found how to do it inside a div, but is…
I'm working on a web project where I need to implement a responsive sidebar that can be toggled using a button in the navbar. I'm using Bootstrap for the layout, and I've encountered some difficulties in achieving this functionality. The…
I have the following html file: const container = document.querySelector('.container'); const box = document.querySelector('.box'); const light = document.querySelector('.light'); container.addEventListener('mousemove', moveLight); function moveLight(event) { const containerRect = container.getBoundingClientRect(); light.style.left = event.clientX - containerRect.left + 'px'; light.style.top = event.clientY - containerRect.top +…
With following HTML <body> <div class="wrapper"> <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div> <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div> <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div> <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div> <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div> <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div> <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div> <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div> <div class="grid-item"><img…
What am I doing wrong? * { margin: 0; padding: 0; box-sizing: border-box; } #plate { height: 100%; width: 750px; margin: 10px auto; } .sidebar { border-radius: 25px; background: rgba(214, 245, 245, 0.7); text-align: center; align-items: center; float: left; width:…
Am I doing something wrong that the css grid command is not scaling the items in my grid? I must be misinterpreting how the minmax value works. .grid { display: grid; align-content: center; justify-content: center; /* flex-shrink: 0; */ grid-template-columns:…
I'm trying to make a button that fills the whole width and has an icon on the right side. We're using a shared library for buttons that doesn't allow icons within the element, so I have to use some negative…
I have a simple project. In that project, I have a drawer that works with translateX. My problem is that when I open that drawer, my main content goes outside the page. this issue is showed in these two pictures…