Category "css"

Responsive media queries only loading when window is adjusted

I have a Word Press site that is using the Avada Website Builder plugin, but with a custom template and a custom CSS file. I have bootstrap 4.6 loaded onto the

How to make grid sytem resposive in tailwind css

Hello hope are you well! I am working on a component Vue.js, and I am used utility class tailwind CSS to styles. Based on my task, I have to created a div as

Empty Button error for ASTRA CART DRAWER after WAVE report scanning

Running the Wave Report tool, I got an error about <button type="button" class="astra-cart-drawer-close"> saying A button is empty or has no value text

media rules not working for diffrent window size?

here in html & css i am trying to create a responsive navbar This is my html code: <a href="" class="active">Contact</a>

I'm using AOS library to give animation but it is not working on some div

This is my html header <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> this is my html <div class="row justify-content-center

flex-box column overflowing parent container

I am having a difficult time getting a flex-box (direction = "column") to wrap rather than overflow a parent container. As seen in the code below (or linked cod

HTML file does not work on web brower, what should I do? [closed]

//My HTML webpage cannot be displayed on browsers. It is just plain text. Please review my codes and see what is wrong. T.T I tried many ways

How to disable scroll on body when clicking on a p-dropdown within it

I am using few p-dropdown in my table header where I also have a horizontal scroll for it's container. When I click on any of these dropdowns, instead of openin

Issue with flexbox / gap in Bootstrap website under breadcrumbs

I got an issue with one of my pages based on Bootstrap which I do not really understand. We added recently breadcrumbs (also BS) for navigation, but on some pag

Is there a way to get a <div> in the same line of another <div>?

So I have 2 <div> tags in my body, and I want them both to be in one line. However, it automatically makes a line break. Is there a way to fix this?

DOMException: Failed to load because no supported source was found in html file

im getting DOMException: Failed to load because no supported source was found in audio.play(). im getting his issue on audioElement.src = 'songs/${index+1}.mp

Flexbox: Making an inline component expand the full width of the the parent container

I have inherited this project from someone else and I would not have set it up like this in the first place, but I have this component list-item-component: <

React prevent MUI Select from changing width in MUI Grid

I have an MUI grid setup with a variable number of columns. Currently, if the user selects a long string for the Select box, the Select grows, increasing the si

How do I use an animated SVG for navbar link hover, and position it properly?

I’m building my portfolio and it has a theme as if it's been drawn on paper. When you hover over a link on my navbar, the SVG animates from underneath, it

Select specific child TAG but only if parent has no other children or text

I would like to use a CSS selector to select a specific child TAG but only if parent has no other children or text. In this specific case the <a> tag that

Responsive Font-Size (vary size using word size)

I'm trying to make the words always occupy 90% of the space of a box, but the problem arises when I don't know the size of these words, as they will be written

how to change image following mouse direction?

this the picture Hello can anyone help me to do this so i should make this by using css when mouse close to div, the picture will change to mouse direction i ca

typescript - detect if the div is overflow with text (not working if -webkit-scrollbar display is set to none)

Below mentioned code works fine if the scrollbar is visible. But it stops working once i use ::-webkit-scrollbar {display: none;} and -ms-overflow-style: none;

setting default font when tailwind fails?

If I use a universal selector in conjunction with tailwind, not all the elements resort to default. I want everything to default to Impact (in case tailwind doe

How to use CSSStyleSheet.insertRule() to change a :root property

I am trying to set the background color of the :root css property in my html file based off a hash in the url. The attached code works, but the hash doesn't per