Category "css"

How can I set Bootstrap 5's CSS variables using :root?

I have a Bootstrap 5 application that consumes a bunch of web components and all of the components use Bootstrap 5. I need to customize the theme on the fly ins

Create CSS custom properties from SCSS variables

I have an SCSS map of colour names and values. I want to create CSS custom properties from them like so: SCSS $colours:( "gray-500": #f7fafc, "red-500

background-image URL not loading using Webpack

Basically I am trying to have an image display in the background of a container, but it isn't loading. I have tried various paths as it isn't entirely clear to

Unable to left align text on <input type="file">

Input with file upload button is: input[type="file"] { margin-left: 10px; border: 1px solid #b5bcc7; width: 360px; vertical-align: middle; m

Unable to left align text on <input type="file">

Input with file upload button is: input[type="file"] { margin-left: 10px; border: 1px solid #b5bcc7; width: 360px; vertical-align: middle; m

CSS select direct children, but not if inside another nested child

So, if this is the HTML of an element: <div class="parent"> <div class="ignore-me"> <p class="child">ignore me</p>

Not able to create a new collection-type in Strapi Dashboard

I had just created a STRAPI project using , find docs here npx create-strapi-app@latest my-shop1 And then sign up to the admin portal. After signing up, I reac

Override the -webkit-search-cancel-button

I'm trying to override the small (x) that appears in the search bar, to have it do more than clear the search Currently this is my search bar: HTML: <input

CSS Apply gradient color to a png logo branding

sorry if it has been already asked but I can't find the solution on how to apply a gradient color to a png logo. Here is the website i'm starting to work on: ju

Adding HTML via JS to a specific child-Element

I have a very specific situation where I have ~50 child-divs which I cannot influence directly, that is, I cannot add classes or ids to one specific child-div n

How to center content in a Bootstrap column?

I am trying to center column's content. Does not look like it works for me. Here is my HTML: <div class="row"> <div class="col-xs-1 center-block"&g

CSS line-clamp not working in safari (on Mac)

I have 2 problems with the display of line-clamps in Safari browser. First of all the codesnippet: .clamp-3-lines{ overflow: hidden; text-overflow: elli

How to wrap text around image in Bootstrap 5

I want my text to wrap around my image. Right now I'm using the Bootstrap 5 grid system. But this is not giving me the result I want. I've tried using 'float: r

Background-repeat: space seems to stop working when parent gets too wide

I've been playing around with space and round values for background-repeat. In theory this should mean I can use a radial gradient to create a nice dotted borde

How to fit a paragraph element inside its parent container?

I'm having this problem: Here is the code: <header class="fu-main-body-adress"> <h3>Address</h3> <p><a href="#" target="_

How do I make two Bootstrap cols the same height?

I have a simple layout like this: <div class="row"> <div class="col-xs-6"> </div> <div class="col-xs-6"> </div> &

Why is my Div transition not resetting on mobile

I have set up a div to move up from outside the bottom of the page when hovered over. This works fine in firefox "responsive design mode", when i try it on And

active anchor tag background color

I have jsp page built with struts2 tiles which has vertical Menu on the left hand side. Upon selecting a Menu I want to keep the background of the selected menu

Contenteditable div with selectAll on focus not working entirely

I have some divs in a table like this one: <div contenteditable="true" onfocus="document.execCommand('selectAll',false,null)">Something</div>

Should I use .innerText or .value in JavaScript?

There's a problem I've encountered but can't find explanation so far. The code is as follows: let textbox = document.getElementById("textbox"); let result =