grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content
.photos_div_right is mapping divs which contain <img/> elements:
```
<div className="photos_div_right">
{vehiclePhotos.map((photo, index) =>...
What HTML elements should I use here and what markup order?
Here's what I have so far but really not sure what to go with:
```html
<article>
<hgroup>
<p>...
How to display value or data in HTML with Javascript
I'm currently struggling with displaying values in HTML. I'm recreating the tip calculator as seen in the image linked below, i've marked the parts to show which labels/inputs im talking about. For now im not using the tip buttons since im mostly focussed on learning how to use the DOM and displaying/working with values that way. This also means the totalAmount is empty since its the same as the bill as there are no tips calculated.
1 The input label called "Bill"
2 The input label called "amountOfPeople"
3 the div was which has <div> 0, 00 </div> in it, which is called "totalPerPerson"...
How does the CSS priority work with a new React + Vite project?
Hey, I'm trying to learn React, but I wanna implement my scss files and preferably have my own css folders, but for some reason, the main React bundle comes with an index.css, and an app.css (which I swapped into an .scss bundle) but I don't understand a couple things:
1. What's the point of App.css if index.css has a higher priority (so what is inside index.css will overwrite what is inside App.css)
2. Why can't I put my css files inside a css folder/where is the section where I can modify the path towards the css files......
Grid col 1fr behaviour vs percentages?
Hi all. Just struggling with positioning in a grid. My grid has 3 columns, with widths of 20%, 1fr and 20% respectively.
The first 3 images above show what happens in a grid when I place the slider in each column.
The columns that have widths defined as a percentage seem to behave as if
overflow:hidden is applied. But column 2, which is 1fr, doesn't. To replicate this, change line 21 from col-start-1 to 2....
Mystery spacing between 2 flex rows
Minimal reproducible code: https://codepen.io/ifigoinimightdie/pen/xxNeYxg
I have a simple flexbox with
flex-wrap: wrap. My 1st flex child has width: 100%, so the 2nd flex child goes to a new row. Yet there's a TON of extra spacing between them that has nothing to do with padding and margin. I never set a row-gap either.
Inspector indicates a purple region, which I think means the "shrink/grow" area. I tried setting flex: 1 etc. nothing has worked. Full codepen here: ...