Category "css"

Play sound on hover

I want to play a sound when the cursor hits an image. I tried to use javascript. the <audio>-tag is working, when I say <audio autoplay> the soundfi

Dynamically Position an Element on webpage

I am trying to use a Emoji picker inside my React application and there are 2 buttons on the page to toggle the picker, I want to show the picker at the positio

how to prevent force dark mode by system?

Dark/Light mode toggle settings on websites and app are tredning and there is a some system default theme mode also available like chrome dev-tools provide forc

toHaveStyles not working with module.css styles using React testing library with Jest

I have this component for which I am writing test case using react testing library I am facing an issue with styles when the styles is imported from .module.cs

Webpack 5: file-loader generates a copy of fonts with hash-name

I cant figure out whats going on here. I use the file-loader to load the fonts of my application: { test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,

How to stop flex from stretching to 100% width?

I have a section with 2 columns pulled to center in flexbox, but for whatever reason the container doesn't wrap itself around them horizontally and instead fill

I want to do Triangle-like Carousel but How? [duplicate]

How can reach info for this shaped carousel I searched "triangle carousel", "pointy carousel", "sharp carousel" and found nothing

How to modify CSS in a specific page of the WP admin dashboard (backend)

I'm trying to remove both padding and the title of the dashboard page of the admin panel of WordPress. The dashboard was redesigned with the "Welcome Dashboard

How to not vertically overflow table cells and print the table?

I know there are a lot of questions about that, but none of their solutions worked for me. I have an html page formed by only a table (that I want print), I wan

Navbar not expanding to fill width of page

I am making a website and I want it to look nice when being used on mobile. However, I can't figure out to eliminate the excess white space on the right of the

Image animation resets page scroll on mobile devices

EDIT 2: I just figured it out. The overflow css property applied on the body is not being inherited by the slideshow div. Adding "overflow: hidden" to the slide

How do I change grid-template-columns style with JS?

this is the class I'm trying to change in my CSS file. .screen{ margin-top: 0%; width: 75%; height: 75%; background-color: lightgrey; display: grid; grid-

How to use height: -webkit-fill-available in Edge browser? How to make a div fill the available space in Edge?

I am using bootstrap to preview the mobile device as follows: It works perfectly fine in Chrome. But not on edge :( My HTML/CSS code is as follows: .fram

Extra Space in the bottom and right of the page

I am trying to make a login page but I don't know why there is a extra space in the bottom of the form and in mobile phone there is a extra space in the right.

Why my code work fine on chrome but not firefox?

I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it? let

Can't position HTML legend tag with CSS Grid

The Problem I have a form with multiple fieldsets and a legend tag for accessibility reasons. I want the legend tag to be below the input field. Since I am usin

removing whitespace from around the website

I was working on this project and while trying to make it fit on all screens using @media it kept leaving a white space below and on the right of the page on th

ngx-chart does not apply card number style

am using the ngx-charts library to represent information, I need to use a specific chart but the style does not fit the same as the example that I present below

How to create "recommended content" widget in HTML

i saw a "recommended content" widget in webs and i want to create one to my website. Example of widget i found online: widget i want to create a widget in HTML&

how to get the pop up images all the same size and in the centre

I have been asked to create an image gallery for a test website for a mini project at work with a few other people. I have created the gallery and the pop up im