Category "css"

Vue.js toggle class on click

How does toggle a class in vue.js? I have the following: <th class="initial " v-on="click: myFilter"> <span class="wkday">M</span> </th

How to animate CSS ::backdrop behind HTML <dialog>?

The <dialog> element is now cross-browser compatible (since March 2022). I tried my hand at it today and familiarised myself with: HTML <dialog> Ja

Setting the height to a div to a multiple of line height

How do you express the height of a div as a multiple of its line height in pure CSS without hard-coding line height or font size? Background I have a box (a D

how to override css rules to be assigned a different set of rules?

It was quite hard to give this question a simple title, so I'll try to explain the situation. I'm using an scss file with two main classes for controling direct

Bootstrap dropdown not working on include header php

I have two pages home.php and header.php now the header file has the the top navigation bar that is to be included in the home.php page.I used a bootstrap drop

Minimal input width growing with value

I have a form in react app which has labels on the left side inputs for values + units on the right side All elements uses display:flex by default. I need the

How to remove a div with fade out effect in JavaScript?

I want to remove a div element on click event but i want to remove it with a fade out effect. I have got some JQuery solution but i need pure JavaScript or css

Using overflow-x: scroll with justify-content: center hides the earlier blocks

I have to use the justify-content: center to center the block to come in the center of their parent div. And if the content are more than it needs to be fit in

Looping Animation of text color change using CSS3

I have text that I want to animate. Not on hover, for example but continually changing slowly from white to red and then back to white again. Here is my CSS co

FullCalendar V2 Event Title cut off in month view

After upgrading to V2 of jquery fullcalendar I noticed that events with long titles had the title cut off. I worked around this issue by adding CSS, but now an

Increase specificity weight with double selector via Sass

As mentioned here on Stack Overflow in another question and MDN tells about the specificity of selectors, I want to slightly increase the weight of my selector

Avada Wordpress Theme, cannot resize logo ( using cafe demo content )

I'm using the Avada Wordpress theme and have installed the Cafe Site Demo Content. I went into Appearance > Theme Options > Logo and uploaded my image lo

How can i set @media only screen less then 320px for indetificator?

I have this piece of code. I'm beginner :/ https://ibb.co/ccrFFG Id like to add some responsibility by @media only screen and (max-width: 320px) {} but it do

if the browser window is below a certain height addClass to an element [closed]

I would like to addClass to an element if the browser window is below a certain size via height; when and only if the height is below a certai

bootstrap 5 navbar offcanvas

I got the code below from the official bootstrap 5 demos and for the life of me, can't figure out how to move the off-canvas menu from Left-to-Right. The docume

Are identical CSS files across separate websites shared/cached?

Let's say I have a website called http://example.com. In my <head> I have a stylesheet which is like so: <link rel="stylesheet" href="/_resources/css/s

slippry slider image slides displaying at once on page load

I'm using slippry slider for my carousel and the issue I have is that all the slides display in a list, then on page load then after about a second the slider f

Backdrop-filter: blur + box-shadow not rendering properly in Safari

I've tried using the CSS backdrop-filter: blur combined with the box-shadow property but the final result doesn't seem to be rendered properly in Safari. I'm u

How to detect Night Mode event - CSS / JavaScript?

Is there any CSS prefix for night mode or javascript event that trigger when user change the mode? I want custom colors for the element if the user enables nigh

Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em;