Category "css"

Switch active buttons using useState and useEffect Hooks for Buttons in JavaScript/React?

I am trying to write a useState() Hook, and perhaps add useEffect() to solve active state on two buttons. It is Delivery buttons that needs the first button-del

Inertia compensated mouse position in Javascript

I am attempting to add an inertia type effect to my parallax background which is based on the current mouse position. I have found a script that can take the po

Responsive website is not working mobile devices

I am having big trouble with my website as it is not being responsive. I already included the required script for adjusting page to device width on the html :

JQuery UI not applying custom style sheet

Not sure what is happening i have notice that our live site vs a dev enviroment the style sheet shows just fine in the head and in the network traffic - however

Display as much elements as it can fit in one line, and if not all of them can fit add additional element that represents number of remaining elements

I would like to align all tags for a given article in one line. If all the tags can fit in one line, then I want to display all of them, like this: But, if the

Need a Click and Drag solution using Vanilla Javascript without jQuery

I have to do a click-and-drag solution for a background image in Vanilla Javascript for a project. I found this solution using jQuery in Codepen. Can anyone hel

Why can't I scroll left on my webpage that I've wrote with HTML & CSS when I decrease the width of viewport?

I've done a project from frontendmentor.io (stats-preview-card-component) with HTML & CSS. Everything work well but when I decrease the width of viewport in

Change Background Color based on the selected Type

I have this <Select> to choose which type they want to input <select class="form-control" id="exampleFormControlSelect1" v-model="exType"> &l

Materialize Modal is not opening up

This is one of the materialize-modals Im using in my file: <li class="logged-in"> <a href="#" class="grey-text modal-trigger" data-target="modal-sig

scroll to a overflowing item inside flex box

My desired goal is that when I keyboard to the right outside of the flexbox, I want to push the other items to the left so I can see the terms in the overflow,

'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