Category "css"

Can't get a div background colour to fill full width of viewport

I'm trying to fill a certain part of the page with a background color. I want the background colour to fill the entire width of the viewport, but have a fixed h

Is it possible for the child of a div set to pointer-events: none to have pointer events?

Is it possible for the child of a div set to pointer-events: none to have pointer events? I need the div that holds another div to allow pointer events to pass

Wrong value for window.innerWidth during onload event in Firefox for Android?

Okay, so, the problem I am facing is this: my mobile Firefox browser is not retrieving the correct values for window.innerWidth, document.documentElement.client

How to change btn color in Bootstrap

Is there a way to change all .btn properties in Bootstrap? I have tried below ones, but still sometimes it shows the default blue color (say after clicking and

Trouble with sticky footer, 2 column responsive layout with wide browser support

I need to create the following layout: Two equal height columns Sticky footer (positioned at bottom in light content, pushed off page in heavy content) Responsi

Two columns same height with three responsive images inside (one left and two right)

I already tried different solutions posted here to get two columns with the same height, but unfortunately I can't get this to work. The Problem is, that I have

How to make div height to 100% of parent td

This is my current code: table{ table-layout: fixed; } table tr td{ height: 100%; } table tr td div{ height: 100%; background: red;

Why should I prefer float over flexbox?

I am new in front end design and when I was looking information about this I found 2 techniques about positioning: float and flexbox. My question is: What shou

I need list of all class name of Font-Awesome

I build app that will present a lot of icons so I need list of all Font-Awesome class name like ["fa-dropbox","fa-rocket","fa-globe", ....] so on is there any

Second line in li starts under the bullet after CSS-reset

I'm having some problems with my ul-list after using applying CSS-reset. When the text in the li is long and it breaks to a second line, the text begins under t

moving last row to bottom of container in bootstrap 4

I have a simple footer with contact information that contains of three rows. The first two appear at the top, the last one should be placed on the very bottom o

Position absolute and z-index not working in bootstrap version 5

The class(.title-image), has a "position: absolute" and the section(#features), has "position: relative" in external CSS. the idea is to place the section(#feat

Why doesn't a child's margin affect a parent's height?

In a simple example like this one, the child margin does not affect parent height: .parent{ background: black; } .child{ background: LightBlue;

CSS media queries: max-width OR max-height

When writing a CSS media query, is there any way you can specify multiple conditions with "OR" logic? I'm attempting to do something like this: /* This doesn'

How to reload a div for equal height child on window resize

I wrote a script to give equal height to child elements of wrapper. It is working fine on page load, but when I resize or change the orientation of my iPad, the

Equal height items in a list

I want that all elements in a list be equal height. For this, I am using the jquery.matchHeigh plugin. However, the selected items are not being updated automat

CSS file not linking to HTML

I've recently started learning to code HTML and CSS by hand for the first time since the mid 90s (last time I tried to build a site, Netscape Communicator Gold

MUI5 Stepper unexpected vertical line when calling from function

Hi I am trying to develop MUI5 vertical stepper but got issue when rendering steps from function. So, there is one extra connector line on top of first step. ht

Why is div.scrollTop = div.scrollHeight off by one message when scrolling?

I am building a messaging app, MERN based. This is pretty straight forward, but when I apply this code to the div, the effect seems to only scroll the messages

Next.js Global CSS cannot be imported from files other than your Custom <App>

My React App was working fine, using global CSS also. I ran npm i next-images, added an image, edited the next.config.js, ran npm run dev, and now I'm getting