Category "css"

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

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