Category "css"

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

How to make a Chakra ui react theme drawer have a closeButton icon that aligns to the beginning of the drawer

I'm following this Chakra Doc on how to create a drawer slideout menu: https://chakra-ui.com/docs/overlay/drawer using the following component: import React fro

Fieldset legend CSS rendering behavior has changed in recent months... what happened?

I have a form with various nested <fieldset> elements, each with a <legend>, and today I noticed an error in my web page on all the browsers I've ch

Setting CSS pseudo-class rules from JavaScript

I'm looking for a way to change the CSS rules for pseudo-class selectors (such as :link, :hover, etc.) from JavaScript. So an analogue of the CSS code: a:hover

How to Change Color of Knob in Bootstrap 5 Switch

So i want to change the knob color to match my color theme. But when i open the bootstrap.css, i could not find the reference to that. I can change the border a

Change the :active background-colour of the React-Bootstrap tabs

I am new to bootstrap but I am a bit fluent in React. I just want to ask how to change the :active background colour of the react-bootstrap tabs. Here is the li

CSS-only Parallax background stopped working on all devices/browsers

I noticed this happening a couple of weeks ago on a website that I built and have worked on since 2017. On the landing page of this site, there's two sections t

What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?

What is the difference between these two selectors? .classA.classB { border: 1px solid; } .classA .classB { border: 1px solid; }

is implicit styling of h2 tag required even if its parent div is already styled to center align?

This is my HTML code (I am practicing HTML!) and CSS file: /*styling the child, descendants*/ /*Individual selectors*/ * { margin: 0; padding: 0; }

How to make links clickable in text?

I develop a web app where users can post text, images, Files a post text can contain links also, for example this is my webpage link: https://demo.com/page1/hom

add a triangle icon to the div opening and closing

I have the code where onclick of the link, i am opening and closing the div here is the code <div id="opendialog" style="display:none;"> <div st

Bootstrap auto column width but all columns still use 100% of parent width

I have a <div> with two columns. (I use two columns so I can left-align the left column and right-align the right column.) <div class="section-header"&

How to prevent overlapping opacity of text in CSS?

There are two semi-transparent text characters that overlap. The characters are contained within the same tag. <p>┻━</p> p { color:

My BMR calculator is not showing a result

I wrote this for a Bmr tool on my website. I don't have much understanding regarding html CSS just started learning this. . On running the snippet is not showin

My BMR calculator is not showing a result

I wrote this for a Bmr tool on my website. I don't have much understanding regarding html CSS just started learning this. . On running the snippet is not showin

Can't center image and fill screen with video on NextJS app

I am trying to: center the image above the waitlist sign up have the background video scale in some relative way so that it doesn't have to load in a perfectly

Vimeo Video iFrame - On Mobile fill Screen (Hide Sides with Pan over Video)

I developing a website with a video as a hero image which is always fullscreen. Easy thing on desktop. Video is hosted on VIMEO. But now the hard part. On mobil

Is there a way to animate when div is visible on viewport using animate.style

I want to animate div only when div is visible on viewport using https://animate.style/ At this point it animates div even when its not in viewport which is nor

MIME type ('text/html') not a supported stylesheet MIME type, and strict MIME checking is enabled in Django Web Application

I am hosting a Django web application on a cPanel web hosting server. I have the application up and running however it is not applying the CSS stylesheets to my

How do i center this columns with the content floating to the left?

I would like the two col's to be centered if I have a window larger than 1024pix width and be responsive. I've tried a few things, but unfortunately I'm no long