Intrinsic style, or least specificity
This might be a silly question, but I want to create a custom component from scratch (an input element for forms that uses Javascript), and I'm wondering how to give it some initial dimensions (and other styles) in a way that can be easily overridden.
There doesn't seem to be a way to apply styles with a minimum specificity, kind of like user agent styles, or is there? For example, the
textarea in my browser (Safari) has a size of 155px by 26px which seems to be its intrinsic size (https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size) as there isn't even a UA style setting that size that I can see in the web inspector.
I would like to be able to set such an intrinsic size (and other styles) on an element so that it doesn't have either a size of zero (or just too tiny) or fills the whole screen/container -- like the textarea. And without the user/me later having to know/overpower some arbitrary specificity, a sort of !unimportant if you will. Am I making much sense here?...<a> wrapping an image extends below the image
I'm obviously not understanding something fundamental here, but the anchor tag that wraps each image in the following grid is adding height to each containing div:
https://codepen.io/adamantonio/pen/PovNLYE?editors=1100
This means that the scale effect on hover pushes the image out of the grid at the bottom only. I can see in the dev tools that the <a> is positioned towards the bottom of each <div> and has a "height" that extends below the image by a few pixels (see attachment).
...
Do all Hamburger menus need Js?
Iām curious , do all hamburgers need to have JavaScript or is it possible to use only Css + html ? Is it better/ more practical to use Js rather than only Css?
Making a cool loading screen
help me make my site have a loading screen that says < Loading > and after 4 secs the Loading text disappears and the < > come close together and do a 180 deg turn and open like door handles
centralize with margin: auto
why i can't put something in the middle of a parent with margin: auto, but i can put it in them width middle with margin: 0 auto ?
Using grid and on mobile overflows content
Hi there, I hope you fine.
I had a problem with CSS grid
As seen on image the mobile view have a overflow the css for the grid:...
[Solved] The "transition" doesn't work
I just started to work with Vue with SCSS for the first time and I noticed that when I tryed transition like the code below, when I hover over my a elements, they don't have that transition time. I try to do it with normal CSS but that didn't work too but it worked with HTML. So maybe it has to do with Vue? Anyone know how to fix this?
```scss
nav {
border-bottom: 1px solid $c-gold;...
Why mobile devices get unwanted horizontal scroll and whitespace ?
have any solution without overflow-x: hidden ? overflow-x : hidden good or bad ?
Center flex child on the page, while ignoring other children
The fiddle below explains it best, but basically I have a two-child flexbox and would like to center the entire container horizontally based on the second child ONLY. Position of the first child should be directly to the left.
Is this possible? Should I use something other than flexbox? I can get close with absolute positioning but the first child moves too far/close to the second.
Fiddle - https://jsfiddle.net/cms07dL3/1/...
When I integrate the redux store into my React app, then I get this error.
Uncaught runtime errors:
Ć
ERROR
Cannot access 'WEBPACK_DEFAULT_EXPORT' before initialization
ReferenceError: Cannot access 'WEBPACK_DEFAULT_EXPORT' before initialization...
How would you start this tricky section?
Hey guys been asking for a lot of help lately š
I am not as good at css as I thought haha
I have the following hero (see images for desktop and phone mockups).
I don't want a solution, I just want to know what's the best way to approach this to make it responsive / skeleton snippet....
Using createElement() outside the function
I'm trying to make a simple ToDo List. The problem I'm currently facing is that when I create the task span outside the function, and the function is called, the value of my input box is given to the span using innnerHTML, and it works fine, but when I click on 'Add Task' button again, it replaces the previous task and gets appended. However if I create the task span inside the function,(so that it is created every time the function is called),it works perfectly fine and gets added next to the previous task.
Link to my JSFiddle:
https://jsfiddle.net/5mqay9su/1/...
css pseudo element ::before
Hello, you masters of the CSS.
I have reviewed the videos from Kevin on pseudo elements to try and see if he mentioned what i'm looking for.
Would love your input on this:
Right now, the element, when "selected" is getting a "selected" class that adds that background to it....
Understanding the behavior of a container's margins and paddings when parent height is set to 100%
I'll appreciate your insights on what's going on under the hood, and any advice to improve the CSS. Anything helps ā¤ļø
š Hi folks, in the link provided below you'll find a basic responsive layout, with a fixed header and footer, and a flex container of boxes.
https://codepen.io/henrytuxdev/pen/BaeKKGr...
.this() and .catch()
fetch("https://pokeapi.co/api/v2/pokemon/pikachu");// to fetch third party API's
.then((data)=>console.log(data));
.catch((error)=>console.error(error));
so in vs code .then() or .catch() methods says . is unexpected token...
How to implement responsive layout that's height dependent?
hey, how would you implement a website layout whose layout is dependent/responsive on height(e.g 100vh)? For example, the content grows its size as the height of the screen grows. What unit would you use for paddings, margins, and font sizes?
Vertical Carousel Animation
Hi, how to create a scrollable box area with content that scrolls from bottom to top, includes a gradient blur effect at the bottom, and loops back to the first box after reaching the last one. (infinite scroll)
Centering HTML form
Im trying to display my login form in the middle of the page instead of the top, but i cant figure out how to. I have tried giving the form an id, a class n applying css to those. I have also tried wrapping the form in a div but it dint work.
login.html code:
```html
{% extends "layout.html" %}
...
Anyone know how the gradient mixing works why color mixing is not uniform?
linear-gradient(45deg, #ff2a51, cyan, #ff97a0, #00bfff, blue)
linear-gradient(45deg, #ff2a51, cyan, #ff97a0, #00bfff, blue)