Category "css"

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

sidebar menu with dropdown in react js

i am trying to create a sidebar with drop down like this example in react js https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp i was able to design

How to keep an element relative to an other one at the same level?

I have two elements, and I want the second one to stick to the first one, so when the screen size is changing, the second element keep the same position from th

What is the best way of indicating the type of work cited by a `<cite>` element?

Per MDN: The <cite> HTML element is used to describe a reference to a cited creative work, and must include the title of that work. MDN then provides a

How to move owl carousel slider arrow bottom to dots

How to move owl carousel arrow from to I need look like :

How to make Slick swipeToSlide vertically?

I'm trying to make a navigation vertical carousel compatible with IE11 i'm using slick library for the carousel, i'm having some issues with swipeToSlide option

CSS layout, flexbox

The "red" div (seen in the image) is in the "head" div. I'm using flexbox to positioning simply like that: #head { display: flex; justify-content: center;