Anna• 1,070
@annaindistress
Submitted
C4rlos
@solracss
All comments
- C4rlos• 410
@solracss
Posted
Nice way of doing those curves. Really like this approach!
0 - PMaciej Kwiatkowski• 150
@kwiatkowskimaciej
Submitted
C4rlos• 410@solracss
Posted
How do you calc all those clamps...? Nice solution!
1 @Mriganka5137
Submitted
How to change the color of SVG icons on hover ?
C4rlos• 410@solracss
Posted
You need to copy whole <svg> to html code, and then you can set
fillproperty. Check mine solution.Marked as helpful
1- PRahul Mourya• 230
@rahulmourya336
Submitted
Built with HTML & Tailwind-CSS. Please share your feedback/improvement points.
C4rlos• 410@solracss
Posted
Check your site at 768px, layout gets messy
0 - Yoseph Winata• 400
@yosephwinata
Submitted
Which one is the better practice:
- Creating a separate file for media queries (e.g. queries.css), OR
- Declaring the media query right after each CSS declaration (in the same file as the regular CSS).
C4rlos• 410@solracss
Posted
Im using option 2. Sass mixins are really handy for this.
Marked as helpful
0 - GentaSurya• 60
@GentaSurya
Submitted
The difficult part of this challenge is changing the image between mobile and desktop version because they are two different image. I thinking about it for 30mins and finally got the idea how.
C4rlos• 410@solracss
Posted
You can also use
picturetag. Much better and you don't have to set media-queries.Marked as helpful
0 @vladiusftw
Submitted
- The difficult part was making sure the components were rerendering properly when dispatching an event to redux because the components are related to each other
C4rlos• 410@solracss
Posted
Unable to add board and task. Edit board -> save changes is not responding to click.
0- KaterinaYakovishina• 170
@KaterinaYakovishina
Submitted
I can't make meter styles work in Chrome. Please advise. Thank you!
C4rlos• 410@solracss
Posted
Hide meter only for screen-readers and build your custom one.
1 @Charley95
Submitted
I couldn't make the spaces in the grid all equal even after using the gap property. How can I achieve that?
C4rlos• 410@solracss
Posted
Use one class that share same properties for cards, no need to repeat it. DRY principle. As for gap, you did it ok, but change it to
gap: 2remand deltete top/bottom margin from card - no need for it.
0- jasnoludek• 70
@jasnoludek
Submitted
EDITS: Max-width of the card container lowered from 63.75rem to 30rem for mobile screen sizes
A margin of 1.5rem is applied to the main element.
Mix-blend-mode is applied to the image and opacity of 0.75.
Thanks @solracss !!
Thank you for checking out my solution to this challenge. I believe some areas need to be refractored in order to have a smoother transition between mobile and desktop versions.
I am not sure I am on the right path to properly setting the color overlay to the image.
Always looking for new knowledge regarding best practices and accessibility.
C4rlos• 410@solracss
Posted
Add
mix-blend-mode: multiply;, changeopacityto 0.75 for your image and you got it.For RWD you can add
max-widthfor your card (decide what would be the best) mobile version. This would prevent for enormous streching.I'd suggest switching to desktop at around ~1200px.
https://getbootstrap.com/docs/5.0/layout/breakpoints/
Marked as helpful
1 - DanishZubair• 20
@DanishZubair
Submitted
I have done this challenge by following a tutorial. I want to ask how can I stop following tutorials and build projects, as I have knowledge of HTML and CSS, I have done many courses and I understand most of the advanced concepts in HTML and CSS, but I am not able to build the project. Can you suggest me what to do, as I am really worried about this. I have 2 years of experience in HTML and CSS. Thank you.
C4rlos• 410@solracss
Posted
"how can I stop following tutorials and build projects"
You've just answered yourself. Just stop code along and start using your knowledge by doing very easy projects like this one.
2 - João Paulo• 30
@jjpmonteiro
Submitted
C4rlos• 410@solracss
Posted
Nice one! You could add a little transition for changing color on hover, so this change is more smooth. Try add some more padding/margin on wide screen for logo (Huddle) and social icons to be "closer" to main content. Really like your solution!
Marked as helpful
1
