Category "css"

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

Bootstrap 5 float-end causing issue with flex elements

When I add the class float-end it pushes the button to right but the div tags next to that comes front of it. <link rel="stylesheet" href="https://cdn.j

looking to simplify css selector with repeating parent child root - UI automation

wondering if theres a way to optimize this selector im using in UI automation: div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1

Fit content and auto width in HTML table

In the following example, I would like my table to have column width customized : Column width fits the content Takes the remaining space Column width fits the

my three.js scene is not rendering. not sure why

my main.js file contains :- import './style.css'; import * as THREE from 'three'; //create scene const scene = new THREE.Scene(); //arguments - field of view