When text gets in two lines
I am always running into this problem.
Lets say i have a button which is display: inline-block (or flex, or inline-flex) and max-width: fit-content;
As long as the inner text does not break into two lines it looks good. The width of the button is defined by its text. When the text breaks in two lines the button gets width 100%. I want it to fit the content. Any ideas what to do? I cannot use max-width because its a cms and i dont know what text will be inside....
hello i am implementing a small app and i am using sass i found that there is structure called 7-1
https://dev.to/technoph1le/a-modern-sass-folder-structure-330f
for a basic project can we go with less complex structure?...
Trying to understand what JSON is and why is it important
Hello guys, sorry to disturb you all; I'm confuse about how JSON works and why is it important, can someone confirm whether the following are correct and what you guys can add to it please:
1. JSON is a data structure use to transmit data (e.g. from server to client).
2. In order to retrieve data from a JSON format, we must use the JSON.parse() method
3. In order to format an object into a JSON format, we must use the JSON.stringify() method...
how to make a text p tag fills it from parent container
Code link : https://codepen.io/Vicky-clowdy/pen/OJKwzye
So I want that p tag text to completely takes width and fills it...
Understanding the "this" keyword for objects in JavaScript
Hello guys, can someone explain why it is important to use the "this" keyword here, what would happen if we omit it please.
Also, I notice that when we create a class, for e.g. say
class Person {. . .}, in this case, I don't remember we would have use the keyword this. I know that the this keyword is use to reference the current object but in the example below, don't we have a single object? So can't we omit the "this" keyword?
```JS...Safari background color with opacity problem
Hi 🙂 I got a strange problem that i have never encountered before. So If the .scroll element is scrollable, the background color with opacity is darker. Any reason for that behavior on Safari?
Here is a simple example of the problem:
https://codepen.io/Todor-Todor/pen/OJKEbQQ...
Understanding how event delegation/propagation works in JS
The confusion is our parent container is registered as an event listener but when we click on one of its child element, the target recognise the element as if it was also registered; can someone explain why is it so please.
```html
<div class="full-image">
<img...
Any good books to learn about cyber security engineering for developers in front end?
same as title
i want to make webapp secure and want to learn how to learn about vulnerability, any good books suggestion?...
How to make a div in each card item equal in height
Hi guys, I have a layout like the picture below. I want the div which display description are equal in height. How can I handle this case? Here is codesandbox: https://codesandbox.io/p/sandbox/lucid-khorana-8mqt45?file=%2Fsrc%2FApp.js%3A52%2C19
Navlist lag when shrinking to smaller screens?
Hey everyone, hope all is well.
Does anyone know why the navlist stays open for a second when shrinking to a smaller window?
Live Site: https://powerbites.glitch.me
Code: https://glitch.com/edit/#!/powerbites
...
What is the difference between using aspect-ratio and setting width: 100% and height: 100%
Hello guys, can someone explain what is the difference between aspect-ratio compare to the use of width and height set to 100% please; I notice that using height set to 100% instead of using aspect-ratio on img tags, cause overflow in one of my project but I don't understand why; from what I know, the images I use are all of different dimensions and so some fit well while others overflow
Need Help: Combining Gradient and Image Backgrounds on a Single Element
I am currently working with five elements, each having its own distinct background image. However, I need all of them to feature the same gradient overlay. I attempted to set this up as follows:
```
$gradient-overlay: linear-gradient(135deg, #000 20%, transparent);
.one {...
Review and problems on small image gallery project
Hello guys, can someone just review my image gallery and give me some feedbacks what need to be modified or enhanced please.... I have some bug though, when I click on some image, the main image overflow, I don't understand why, can someone explain please
Here is my codepen:
https://codepen.io/Fakeur/pen/oNKMxbv...
Object shift in very large font sizes
Hey,
I have made a "simple" navigation map in pure html/js/css (runs with golang and htmx in the background, but that should not change anything). You can drag with your mouse and zoom with your mousewheel just like in a maps-program. The calculations and the js shouldn't be of concern here, the only part I think is the crucial one is this css:
```css
navigation-map {
display: block;...
How does the object-fit property works on images
Hello guys, can someone explain how the object-fit property works on images, more precisely, what is the difference between the values it takes like cover and contain please
How to fetch images from online stock image website like unsplash and use them
Hello guys, sorry to disturb you all; I want to build a small javascript project; it is an image gallery project; the problem is I need to download images every time I need some, is there a way to dynamically fetch some images online ?
Can we add an event listener in a conditional statement ?
Hello guys, sorry to disturb you all, can we have an event listener inside an if statement ? Does that make sense to have one in a conditional ?
how to make this div responsive ?
this is just a tag how can i make it responsive ? is it even possible i mean there should be padding / margin according to text length. how can i do that ?
first image is the one i made and second is the design...
Trying to add several functionalities with a single button using javascript
Hello guys, sorry to disturb you all; I'm trying to experiment with event bubbling but first I wanted to make a button that when I first click on it, some contents are added to my preformatted paragraph with id="output". Then when I clicked on it once more, the button content should change from "Click me ! " to "Reset" and it reset our preformatted paragraph content to an empty string. If I click on the "Reset" button now, I should have the "Click me!" button which display content of our preformatted paragraph as we were doing initially. I tried to do it inside the function handleClick itself, like I added the lines:
```js
if (button.textContent ==='Click me!'){
button.textContent = 'Reset';...