Category "css"

'conditional' css in next/react

I'm trying to apply styling depending on the element's parameters. I've tried to search for "conditional css react", "conditional react style in css" and other

Grid column template breaks when width < 500px

Everything works in landscape mode it outputs like this: value#1 value#2 value#3 But when screen width is < 500px it outputs like this: value#1 value#2

How to include Tailwind CSS styles from React component library into the app CSS bundle?

G'day, I am building a React component library with TailwindCSS and ViteJS. The library outputs each component as a separate JS file, for example: // @component

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