Category "css"

<ResponsiveContainer> in Recharts is not rendering

I'm trying to use a lineChart from Recharts in my react app. But while I'm using the </ResponsiveContainer> the line chart is not getting rendered. Here i

Change color in a number of different divs that all share the same class

I have a site with a lot of different div. The thing they have in common is all share (besides their unique classes) a shared class. Lets just call it .changeCl

Visual Studio 2022 ASP.NET Core 6 Default application and Add folder to workspace in Chrome DevTools is not working anymore

After some update to either Visual Studio (I have the same issue in both VS2019 and VS2022) or Chrome I can no longer update the CSS in DevTools and have it ref

Why is CssMinimizerWebpackPlugin preventing my main js file from being minified?

I am using webpack's CssMinimizerWebpackPlugin (docs). I initially configured it as recommended on the documentation optimization: { minimize: true, m

How to change the style of a div and reset it after 1000ms?

I have multiple (only 2 in this example) divs overlapping with each other... What I'd like to do is to add buttons that represents each div, which when clicked,

WordPress 5.9 editor-style.css not working anymore and adds css properties that overrides block styling

I have a WP site with the Gutenberg editor styled (the place where you are writing the entry). It worked perfectly until this 5.9 update, where there have been

Bootstrap collapse should be open in Desktop but closed in Mobile

Does someone know how I can have a collapse open in Desktop and closed in Mobile? Would it be possible with Bootstrap only? Desktop: Mobile: Here the Content s

Preloading a .css file with NextJS

We are using NextJS and Material-UI for our site, and upon loading the pages, it gives a FOUC. I've narrowed the problem down to the fact that the JS loads fast

Create block with several columns and rows with Flex

Help me please to create block like on screenshot: Now I created 2 rows and has some problem. I don't know how to delete distance between rows. Need to make it

Generate HTML file with Powershell

I need help ! Currently, I fill a string with HTML code via a powershell script and then i write it in a file index.html However, when I display the index.html

Get parent node dimensions in svelte

I'm trying to use Svelte and it's my first time so sorry for maybe the stupid question. I read the Svelte documentation but I'm stuck with a simple problem. Bas

Css backdrop-filter blur weird flickering when scrolling

I have a background image and i am trying to add backdrop-filter blur, but as you can see on the pictures bellow when i scroll a weird flickering happened on th

How to position a background on one side of centered content while making the BG translucent without distortion?

I'm working on the following layout issue: the page heading is center aligned. It should have a background image on its left side, and the background should als

Vue3 css v-bind() not working with external script

I'm trying to make v-bind within css work based on this feature: https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css and https://github.com/vuejs/r

React Application <head> tag has the <script charset="utf-8" /> around 15 times. How can I reduce that? And why is it showing it so many times?

The <script charset="utf-8" src="/static/js/{chunkName}"></script> tag appears an incredible amount of times coming from different chunks. Why is th

passing props as classNames in next.js

I am trying to have the header of each of my app's pages change color based on the current page. How I am trying to achieve this: <Header className="headerBi

Fill parent container and reduce image resolution with next/image

I'm trying to fill a fixed-size container with an image. layout="fill" works like a charm, but even though container is only 125x125, the original image gets do

flex container inside position absolute container not follow parent dimension

I try to create modal box that 2 type design, my problem flex that inside absolute parent not follow parent dimension. if u see image inside flex container, it

How do I read Google Chrome Coverage report?

For example, I have this Coverage report snapshot: It says that page load is 2.5MB of bandwidth though the Coverage report says there's more unused code (3.3MB

flexible width with overlaping divs on blazor with CSS and bootstrap

I have a hand of cards on my UI and I want to allow fitting more cards than actually fit on the div, by letting them overlap if necessary. My cards are linked t