How to Vertically Center Logo and Icons with Respect to the First Row in Footer?
I'm working on a footer layout and I'm having trouble aligning the elements as I want them. I need the "Logo" and the icons in the "icon-container" to be vertically centered with respect to the first line of text in the "text-container", not with respect to both lines of text. Additionally, the "Imprint" text should remain horizontally centered with respect to "A long long text".
Here's the relevant HTML and CSS code: https://jsfiddle.net/vqL23zu4/9/
`html, body {...
Grid layout scrollbar margin/white space issue
Hi, I'm building a small interface that uses grid for layout, and it's supposed to handle folders with saved chats in them. My problem is that until a scrollbar appears, everything looks good, but once there's a scrollbar, the items (saved conversations in this example) start missing the margin on the right - or rather, the scrollbar appears inside their margin, making the interface look imbalanced/bad.
I'd really appreciate any thoughts on how to solve this.
Codepen: https://codepen.io/danaxo-the-looper/pen/xxoPYjg...
Should I learn SASS right now?
I have a solid understanding of front-end languages, and I'm eager to take my skills to the next level. Recently, I started using Tailwind for a project, and I found it incredibly useful. However, I'm wondering if I should learn SASS before fully committing to Tailwind. While I know SASS has a short learning curve, after experiencing Tailwind, I find the process of naming classes in CSS and SASS a bit tedious and less efficient.
Shape Outside for envelope
hello i have my animated envelope and i wanna make shapeoutside for bottom to fit in polygons on left and right
Implementing dark mode where you can save your settings
So we have a React app where the user should be able to choose light, dark or system settings for the theme. At first, I implemented all the color tokens (variables) for the light theme, and then wrapped the dark ones in a
@media (prefers-color-scheme: dark) {} query. Now I'm wondering what should be done as the user changes the settings within the app. I'm doing a window.matchMedia('(prefers-color-scheme: dark)').matches if the user doesn't have any settings stored locally, and then adding a data attribute to the <html> tag, but I'm not sure that's the right approach.
What are you recommending?...Email Template Design
Can anyone suggest me source to design brand email templates which works nicely for dark modes as well.
How to mark errors only if at least one none error field exists.
want to mark all blocks that have an non empty error attribute.
But only if there is a block later that has an empty error attribute. (essentially detecting that the user has skipped a block)
My current solution is add the marking to all blocks with non-empty error and then remove it if there is a previous sibling that has no error.
It works if there is a block that has an empty error attribute but if there isn't one all blocks get marked so when a user opens the form all fields are marked as errors until he fills in the first block....
JS Path
I am going through chrome dev tools docs, there is this "Copy JS Path" that they are telling to copy. I also pasted it in a console which evaluated to an expression.
But I dont understand what exactly is a JS Path and why we copy it. I googled but still cant find anything...
LINK: https://developer.chrome.com/docs/devtools/dom/#path...
Question about web components
I'm working on a project that will require being able to add a bunch of different components to the page at any given time so the plan is to try to use web components. I'm having a debate with my coworker, however, on the best way to set them up and hoping anyone might know the pros or cons of one way compared to the other.
My argument is that everything should be built inside a singular class constructor with all the logic built into it. So something like an accordion would look like this and the class would loop through each details tag to set up all the logic needed
```
<accordion-list>...
Should the HTML5 dialog tag be used for a toggleable responsive navigation menu?
It is common practice to have the primary website navigation always visible on larger devices (desktop and tablet) and shown/hidden with a toggle button ("hamburger menu") on smaller devices (mobile).
Is it proper to use the HTML5
dialog element for this type of responsive navigation?
Dialog Pros...How to get flex item to remain fixed?
So I was trying to make an insult generator for fun and ran into the following issue:
https://gyazo.com/29b1019b9220b9f1a8f25b242769735a
The content div at the bottom has fixed with auto height. And so when content randomly changes on every submit, the height changes relative to that content. The height's changes then also end up changing its sibling's position. The sibling is just the input-button pair div. The pair div and the content div are items in a flex column container.
...
How to center grid content in the middle?
hello,
i have 3 elements that should actually be in one line next to each other with the following grid template... but it doesn't work as intended, if i remove the layout-right element it works. but only the layout-left is next to the content
any suggestions for a solution?
...
Why is the autofill text color not white in my form input?
I have created an HTML form and I am trying to set the text color of autofilled inputs to white. However, it doesn't seem to be working as expected. Here is my code: https://jsfiddle.net/76crfwjv/1/
`input:-webkit-autofill {
background-color: #000 !important;
color: #fff !important;...
Next js Custom Field Component With React Form Hook
Hey everyone, I need help! I'm trying to create my own custom Field Component in Next.js with the React Hook Form library for form validation. I'm a bit confused about how to use Controller inside my Field Component.
Here is my code
This is the parent component. Currently, I am using Controller in the parent component. It works, but I want to use it in the child component.
```tsx...
infite scroll text animation
Hi guys, I want to create a infite scroll text animation. But it does not work as I expect. First, It does not start at the begining of the wrapper. Second, It creates a weird effect at center of the wrapper. Can anyone help me? Here is codesandbox
https://codesandbox.io/p/sandbox/infite-scroll-8clmdx?file=%2Fsrc%2Fstyles.css%3A12%2C16...
How to fetch data from a function?
This works, but I need to elaborate on it ...
I am sending a list of names to a function that sorts them in various ways and retrieving the name at the top of the list. The function has
...
name1 = getname(names)
name1 = getname(names)
return name1
return name1
nested scss, css
why does the nested scss not working but plain css does?
working
```css
.text-container {...
need help with fetch json files ( from files) in reactjs
I created a jsx for all json files like this
```js
import Vowels from './file'
import consonants from './file'
...
