Category "css"

Css not updating react component

/* Here is my container in my react component */ <Container fluid className="graph-container"> <Tabs id="graph-buttons" var

Rainbow text animation using only CSS

I got inspired by this Rainbow Text Animation rainbow-text-animation, and I would like to use only CSS to make this happen instead of all that complicated SCSS

How can I optimize a popup Javascript code?

I'm just starting with Javascript and I made this popup code, and I was wondering if there's another code with the same result or a way of optimizing the Javasc

How to make two responsive columns inside the mat-card-content using fxLayout?

Here is my HTML code snippet: <mat-card-content> <div fxLayout="row" fxFlex="1 0 0"> <div fxLayout="column">First</div>

My tilt js is not working the card is not tilting need help within 4 hours

So guys I have created a website and in that I have a card hear is its html code <div class="about-indiamain" data-tilt> Main Content</

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