Category "css"

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;

issue with text characters wrapping around underlying image instead of overlapping

I have two overlapping elements using relative positioning. A block of text overlaps an image behind the text block element. I can get the elements to overlap b

Create Close-up Half Circle in HTML CSS

I was ask to create half circle-like design for my project in html css , its look like this : Figma Design but it really ""zoomed"in. i tried to make it and the

Enabling scroll using Tailwindcss

I am using Tailwindcss and trying to achieve a design, in which there is a scroller in middle section. However, the scroller is disabled and it's full height i

Unable to positioned the webgl canvas while capturing image

I'm accessing the webcam and trying to take a picture. this is what it looks like before capturing the pic. But this is what I'm getting after taking the pictu

How to fade smoothly between gradients in JavaScript

This code populates a div with a predefined set of gradients and fades through them in a cycle using jQuery's .animate() method: /// Background Gradient Cyc

How to style child elements with vanilla extract?

I am starting to use vanilla extract to style a NextJS app. Is there any way to style child elements from the parent without creating another class? I have an s

How to configure a site-specific custom caret color for Dark Reader?

For script.google.com, I can make the entire page site dark, but when I do, I cannot see the cursor/caret. I've found the developer tools for Dark Reader, but

Adding shine animation not working in special cases

I have this function to shine any text element which is passed to it. The first example here works fine (the second example doesn't work, I provide this in case

Overriding element's css in Nebular/Angular

So I am trying to change the css of the header element of the nebular theme in angular It looks like so I want it to look like this I am trying to separate the

Command removing tailwindcss in the input.css

When I run: npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch My output.css gets mostly deleted, and only contains a handful of tailwind css, see

Stylesheet renders in grover debug but not on downloaded pdf

I'm using Grover to render and download pdf copies of documents that are generated in my app and am having trouble applying css to it. When in grover's debug m

How to target a styled component inside another styled component?

Instead of using div:first-child or div:nth-of-type(2) I would like to say Row or ColSm3 like we usually do in normal CSS, Is it possible to target a styled com

How to set a background image for all pages in reactjs

I tried to set a image to all pages as background. I have tried to set the style of the body tag of index.html <body style="background-image: url(%PUBLIC_URL

How do I randomly change an HTML element on a timer using Javascript - across the web, not just within the browser?

I'm creating a website with HTML, CSS, and JavaScript. I have a picture element on my page, among other elements. What I want to achieve is to randomnly change