Grid layout combinations
I'm trying to recreate this reference image with css grid but i'm a little confused on the most sufficient way to lay out the grid. This is a new design style i'm trying too so it creates a little more confusion with laying it out 😅 .
I've attempted to draw out plans for the grid layout but i've ran into a few things that have halted me a little due to confusion, for example, in the first image, i've laid the grid out with one column and four rows but i'm unsure whether wrapping the last two images in a container or having two rows in the grid is the best way to go. When i thought about having two columns in the grid i got a little confused on how to span the top row of three items along two columns so i thought that one column along with flex to lay out the three items would be best additionally wrapping the last two images in a container but i'm honestly not sure on the best approach to this. I'm trying to decide on the best approach that also allows an easier conversion to a responsive version of the grid (as seen in the second image, which i've also attempted to draw the plan out to). Has anyone got any advice?...
Text align but not quite text-align
Hello, so I'm trying to align my text in different ways.
First, I'm trying to do the right-alignment figma offers (short-to-longest lines), but in css the text-align cascades in the opposite way (From longest-to-short lines). Photo 2 is figma & 1 is css
For another section, I'm trying to get a longest-to-short alignment, but this time as a centered text. (Photo 3).
I managed to get it with <br> tags, however, this is not responsive and breaks in smaller screens....
React remove item from cart
once i open the cart the product is deleted and this error appears
```js
const handleCartDelete = (product, size) => {
const updatedCart = cartItems.filter(
(item) => item.id !== product.id || item.size !== size...
How did they get this effect?
found a site that has has a sweet blur effect, i was expecting filter but cant, figure out how they got it https://uploadthing.com/, I was wondering if it was just some alteration to the same image as their favicon but not sure how they created this smooth looking tint, just curious, please @ me if you figured it out, Thank you
avoid overflow-y: auto when using overflow-x: hidden
is there a way I can avoid overflow x without affecting the y overflow? first img without overflow-x:hidden;
here's the code for the line
.clinica {
overflow-x: hidden;...
Grid Spacing
I'm attempting to re-create this reference image for css practice however i'm unsure of the method on how to close the gap between the event and image grid items, I've provided the reference image and the issue i'm having below along with a codepen of what i currently have. Any help, pointers or tips would be much appreciated.
https://codepen.io/deerCabin/pen/mdQBjag...
How to check if an element behind a modal <dialog> is clickable?
I'm trying to write an automated test for my front end code. The scenario is relatively simple, as shown in the screenshot: I have a webpage with two modals, one stacked on top of the other. I want to check that you can't click on anything behind the top-most modal, but I'm not sure how to check that.
Testcafe is my test framework. I can use any CSS selector to get information from the elements and get attribute information, too. I just don't know what I would look for to check that one.
MDN says there is an
inert html attribute: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert That's what I would look for if I could, but the dialog documentation (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) says, "When using <dialog> along with the HTMLDialogElement.showModal() method, this behavior is provided by the browser." Based on my tests (FF only), that means inert attributes are not set on the other elements....
Positioning elements not responding as expected in Tailwind CSS
I'm currently working on a web project using Tailwind CSS and encountering issues with positioning elements. Despite applying the necessary Tailwind CSS classes, the elements are not responding as expected.
I have tried using utility classes such as absolute, relative, fixed, along with top, right, bottom, and left classes to control the positioning. However, the elements do not move or adjust their positions accordingly.
```...
Flex box issue
I have a parent div which has two child div .Parent div flex property the child one has a h1 heading of large size and the other div has a button with border . Due to the flexbox the height of second child is same as the first child . I want to add custom padding for the button but due to flexbox i am unable to add top and bottom padding.I have attached the image . I hope you understand my question
React <Route> has mysterious right margin
GitHub: https://github.com/nnall/GoWithGig-Nick.git
App.js (showing Routes): https://github.com/nnall/GoWithGig-Nick/blob/main/src/App.js
My "Home" Route : https://github.com/nnall/GoWithGig-Nick/blob/main/src/frontend/home.js
...
Making a font-start from the bottom line.
I've most definitely seen @Kevin do this in some video, its when the font has some extra space below it and you want to remove that. In this case this font Im using 'Libre Baskerville' has some extra space below it, how do I get rid of that, I have for sure seen kevin do it in a video, but now I can't find that video. Please help.
