Category "css"

Seam forming between adjacent SVG images in flexbox

I have split a single SVG image into parts and placed them in a single row of a CSS flexbox. The goal is to keep a constant height but allow the width to change

Javascript request animation frame irregular translation

SO community! I'm trying to make an object move at the same phase as scroll using CSS transform. The problem is that I see the animation is not smooth. Instead,

Decrement font-size on condition, why is my recursive function not working?

I have a <p> element inside a parent <div> container. The parent container is sized with width and height as a % of the viewport. Upon window-resize

Stylelint wont mark errors in VSCode

VScode doesn't show me any stylint errors. package.json: ... "postcss": "^8.4.12", "postcss-scss": "^4.0.3", "stylelint": "^14.7.1", "stylel

How can I hide the searchBar in a responsive navbar?

I have a problem with the searchbar not hiding when reducing the size of the window. Maybe there's a better way to solve the problem but hiding the searchbar, h

Height not actually changing hieght while floating

Right now I'm coding a menu that has a two column layout. This is the code. HTML: <!DOCTYPE html> <html> <head> <met

How to fit a img wholly into a div so that I don't see a background color?

A white background can be seen at the bottom of the div, can this be fixed? .flexbox-item_one { display: inline-block; width: 200px; margin: 10px; b

Why can't I set the text color of this span element to white

Simply put, I want to change the color of the first two texts of each line to white, but it doesn't work anyway. It is as if the span elements generated by js c

CSS input box cutting off text

I am having an issue where the text in this input box is being cut off. I've increased the height and the width and it is still showing the same amount of chara

VueJS generate seperated JS and html files with vue-template-loader/ Website without JavaScript

So here´s a weird question. We have to develop an own website in our module Frontend Design for a study project. Problem is, our prof seems to live 30 yea

Specify the padding between rows in a checkboxGroupInput

This is my shiny application: ui.R # values to show, or not show, these will be the 'choices' and 'selected' values # for the checkboxGroupInput() all_rows <

Bike parts in box are not fixing in one place - html css

I am using Visual Products Configurator as per client needs. The product is a bike, and it is divided into 4 parts. Bike body Front wheel Back wheel Seat I am

Javascript Animated Skill Bar On Scroll

I'd like to activate all of this animations whenever I scroll to a certain section, in this case the second one.So basically it starts with the section one and

Scoping v5 MUI Styles

We have a legacy application that we're slowly migrating to React and MUI. In order to prevent overlap in styling between the different parts of our applicatio

Bootstrap 5 Accordion button (arrow) missing

I've copied the example from Bootstrap 5.1 docs. When I pasted it into my .html it looked clunky (and was missing the default arrow) so I did some minor css to

browser won't load css stylesheet for my local website using express and node

And the app.js screenshot: I tried every possible combination of href and express.static(""); adresses. I either get a response from a browser saying browser

Why Is My HTML and CSS Code Not Running Properly On The Internet?

I recently added some text effects to my website in HTML and CSS. It runs perfectly on VS Code live sever but whenever I upload the code files on to my cpanel,

Component not centering when screen is smaller

I am making a website which has to be compatible for all devices (laptop, tablet, phone) and can't seem to get my weather API component to become smaller when o

Keep constraints between two elements when one is getting off screen

I would like an element "1" to go off screen (off red square in my example) and to be followed by an element "2" without having to use anything else than CSS co

Javascript works in codepen but not on browser

const toggleButton = document.getElementsByClassName('navbar-toggle')[0]; const navbarLinks = document.getElementsByClassName('navbar-links'); toggleButton.