@maaghiaSubmitted over 2 years ago
I am gonna need some help to style the range input, I would be glad to receive any help so that I can complete the challenge
Faruk Abdulganiyu
@farukingAll comments
- @farukingPosted over 2 years ago
Visit this link to help you better understand ranges styling ranges
Marked as helpful1 - @tomatikradSubmitted over 2 years ago
Hi guys please tell me if I adapted the picture correctly only for mobile devices and for desktop?
- @IAmKachiSubmitted over 2 years ago
Hey Guys, I just completed the product preview card project. I'm a newbie and my code is filled with errors and bad practices. I'll love criticisms and reviews on the code and how I can improve in the future. My questions for this challenge are:
- I found media queries difficult to understand. two images were provided for the desktop and mobile designs respectively. I didn't know how to change the image responsively based on the screen size. I'll need all the help I can get on this. Thanks.
- I'll love to know more on how to handle events with JavaScript.
@farukingPosted over 2 years agoGood effort! you can only get better.
- I will suggest you visit this link to learn about media queries, event handler and much more.
1 - @oAnthonyGSubmitted over 2 years ago
this challenge was cool, I had few difficulties in the footer part due to not having knowledge of certain tools to look like the original, I conclude my way, I accept solutions to solve the footer problem. Feedback welcome!!
@farukingPosted over 2 years agoGood job! however, your project is not yet responsive and can you be more specific with the 'footer problem' you have.
0 - @NinjaInShadeSubmitted over 2 years ago
Any ways I can improve my React?
@farukingPosted over 2 years agoYour project is not working yet. Kindly look into it.
1 - @EileenpkSubmitted over 2 years ago
I had to read up on mix-blend-mode to get the layering of the picture correct, but it wasn't complicated, the background-color had to be on the parent container, and the background-image + mix-blend-mode property on the child element. Any feedback is always welcome!
@farukingPosted over 2 years agoGood job! An observation though, the 'insight' text doesn't blend well on resizing i.e. the last letters are hidden on resize.
Marked as helpful0 - @SamHemingwaySubmitted over 2 years ago
- Was there anyway to achieve the footer without using media queries like I did? Aka pure flexbox/grid?
@farukingPosted over 2 years agoOne way to do this is using a combination of flex-wrap, justify-content etc. But you might still need to tweak some things. modify the footer class style to:
width: 100%; padding-inline: clamp(0rem, -6.107vw + 2.931rem, 1.5rem); flex-wrap: wrap; display: inline-flex; justify-content: space-between;after that you can remove the
grid-template-columnin media queries. Don't forget to also remove thedisplay: gridandgrid-template-columnin the footer class.1 - @CodeVeeSubmitted over 2 years ago@farukingPosted over 2 years ago
Good job. This was a difficult one but I completed it. The search functions seems not to work, You can check mine probably, you will find some tips.
0 - @fytrwSubmitted over 2 years ago
Hi!👋
My Tic Tac Toe React project! There is error with useEffect, I dont know how to fix it. Is using that many useStates necessary?
It will be great to hear some feedback from you on what could I have done wrong!
@farukingPosted over 2 years agoNice design. I completed this challenge as well and it was a fun one. You can check it but I made it with just HTML, vanilla javascript, and it's rule are a little bit more advanced.
0 - @NIKAKLSubmitted over 2 years ago
Is there a way to change the shadow radius without changing changing the radius of the whole card element? I tried wrapping the card element in another div and creating a shadow there but it didn't seem to work. Any tips?
@farukingPosted over 2 years agoI am not sure there is an official way to that because according to web docs: "If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners". Source
However, there is a way to go about it. create 2 card class(instead of one) and make sure one is atop the other(one is visible and the other is not) by setting the position of the first card to 'absolute'. Then add box-shadow and border-radius to the one behind while setting a different border-radius for the one at the top.
Marked as helpful0 - @tbrownleeSubmitted over 2 years ago
Instead of simply changing display:none to display: block to reveal the answer, how would I reveal the question slowly?
@farukingPosted over 2 years agoI would have told you to use the animation feature of CSS but you can't animate the display and height property of CSS. There are however other ways to achieve the desired result. Let's use plain Javascript code. Add the code below to your javascript file(inside the toggle(i) function after the second line).
let id = null; let pos = 0; clearInterval(id); id = setInterval(frame, 10); function frame() { if (pos == 50) { clearInterval(id); } else { pos++; description[i].style.height = pos + "px"; } }Link to explanation Source
Marked as helpful1 - @why-not-phoenixSubmitted over 2 years ago
Hey guys,
Here's my solution for the stats preview card.
- Would've felt better making the side image a
background-imagebut couldn't figure out the right blend with thebackground-color. I'd appreciate tips on how to mix images and colors. - Main might look terrible on some devices, I tried fixing that, what do y'all think I could've done better?
- Wasted a lot of time trying to get the right dimensions. Is there an easier way of getting dimensions that fit?
My code might be messy, I'd appreciate any tip on optimization and better arrangement. Generally, I just need an assessment on these guys. Thanks for taking the time to help.
@farukingPosted over 2 years agoNice job. What I can add is that you change the width of the card(line 27 css) to 90% to get it closer to the design.
1 - Would've felt better making the side image a
