Latest solutions
Audiophile E-commerce using React, TS, and Tailwind
#react#react-router#tailwind-css#typescript#react-hook-formPSubmitted 2 months agoDrag-and-Drop Todo App: React / TS / Tailwind / Dnd-kit
#react#typescript#tailwind-cssPSubmitted almost 2 years ago
Latest comments
- @rohitKumar38344P@scottmotion
Another approach would be to use the CSS content property: https://developer.mozilla.org/en-US/docs/Web/CSS/content
So if you had a dark mode class on the element (or parent) you could use that to determine the content url :
.someDiv { content: url(../images/bg-desktop-light.jpg); } .someDiv.dark { content: url(../images/bg-desktop-dark.jpg); }
Of course if the class is on a parent element then the selector would be something like
.dark .someDiv
Marked as helpful - @hamidMolaDevP@scottmotion
A couple things I noticed Hamid:
On the main element you should remove min-height: 70vh.
The grids are overflowing in Chrome Inspector, you can try this:
.profile { display: grid; grid-template-columns: 45px auto; }
Alternatively you could make the element a flex row.
I recommended to another user that they make a wrapper around each testimonial:
<div class="people"> <div class="testimonial__wrapper"> ...Testimonial elements here... <div> </div> .testimonial__wrapper { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
If you use space-between and gap it will stretch the div and you don't need margin/padding on the inner testimonial elements. You might need to add flex column to the people div in your layout.
Marked as helpful - @KoliOyamaP@scottmotion
I added a wrapper around each testimonial like this:
<article class="testimonial"> <div class="testimonial__wrapper"> ...Testimonial elements here... <div> </article> .testimonial__wrapper { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
The justify-content: space-between will help space out the content if the column stretches. The gap replaces margin-top on the inner elements, so you can remove that!
Marked as helpful - @kamiliano1P@scottmotion
Hey Kamil, I'm working on this project now and I ran across similar problems with nested data in Firebase. I solved this by flattening the data structure to be a top level collection of Boards with 2 sub-collections: Columns and Tasks. I changed Task.status to Task.columnId and put in the Firebase key of the parent column. Then I did a querySnapshot for each column's tasks based on the columnId. Now moving the Task to a different Column is as simple as changing the Task.columnId value. BTW I'm holding the subtasks in an array within each Task, not a sub-collection.
Marked as helpful