Hai, I'm facing problem to implement responsive background image. In this solution, I have not use any background image. I try to put background image based on breakpoint tailwind presets, but background image on intro section should be overlaying another image and other background image is having a gap on left and right. I'm still exploring how to use background image properly.
Any comments are welcome, Thanks in advance!
Hello! That's a job well done~ π
I hope these suggestions will be helpful:
Hello! Awesome work on this~ π
Here are some tiny suggestions:
<br> tags for the paragraph. Let the words wrap naturally.<body>. Then, set background-size:100%; so that the background image fills up the remaining space.Hello sir/ma'am, This is my first project which I have med all alone. I had to take help at one place to put the eye icon while we hover on equilibrium image. Feel free to share me your thoughts and where I should work better. Thank you.
Hello! Good job on this challenge~ π
Here are few suggestions:
height of .inner-container to 100vh.fill:white; You can refer to this.
Note: You can get the SVG code by opening the SVG file inside your text editor (E.g. VsCode).h1 element. π You can read this to find out more about headings.Hi, i would like to get feedback on my code π§βπ»
Hello! It's a very good job~ π
Here are a few tiny changes I would suggest:
<a> or <button> for the time buttons: Daily, weekly, monthly. (Those on the side) This will let screen reader users to know they are to be clicked. πtime button's color when the page first loads.function showCardContent(time, data){
for (let i = 0; i < cardsTitles.length; i++) {
currents[i].innerText = data[i].current + "hrs";
prevs[i].innerText = `Last ${time}- ` + data[i].previous + "hrs";
}
/*play the animation */
addAnimationFadeIn();
}
The code above may or may not work but the general idea is there! π
Hello everyone, I would like to receive some feedback about an issue occurred with my mobile content height, for some reason that I completely don't understand it doesn't let me scroll vertically as it suppose to do. Can anyone help me to understand what happened? (I had tried some things as overflow-y or even set a fixed height but nothing happened with the first hidden card)
Hello! To fix your issues, just remove align-items:center; from body element and set height:fit-content; on main element for mobile size using media queries. π
This one was fairly simple for me! In fact, I was able to complete it in well under an hour, and I'm mad proud of myself for honing my HTML and CSS skills that far.
Any feedback you can provide would be nice. I did have a bit of trouble with the hover effect over the image, so any cleaner solutions would be greatly appreciated!
Hello! Great job for this. It looks very responsive too~ π
How can I improve my JS code?
Hello! Great job~ π
Here are few suggestions:
button or radiobutton elements for the tip selection (Screen reader users won't know it's to be clicked if you use a div.RESET text to Reset. Find out more here πinnerHTML for the texts, an alternative would be textContent. You can read about their differences here. But for this current use case, both can be used. πfor(const tipBtn of tipButtons){
tipBtn.addEventListener('click', handleTipClick)
}
const handleTipClick = (event) => {
let tipValue = 1 // Change it to whatever the default tip value is
const selectedTip = event.target.value
if(selectedTip === '5%'){
tipValue = 5
}
let totBill = Number(inputBill.value)/100*tipValue
let totPeople = Number(nrPersone.value)
totTipOutput.innerHTML =(totBill/totPeople).toFixed(2) + "β¬"
}
The code above is written with the assumption that radio buttons are used π. Also, it might or might not work but, the general idea is there. π
Hello, Guys! i am delivery the best of me in front end πͺ.
Hello! Great work~
I will suggest just a few tiny changes:
alt value. For those you feel is not necessary to tell the user about, you can just leave it as alt="". π₯³h4 to h2 perhaps. Never skip the order. π ReferenceYep, that's about it. π
Hey Everyone! This is my solution to the FAQ section.
I need some help with a transition I have been trying to make but haven't succeeded yet.
When the answer 'hides' I want to transition the height, so that it closes smoothly, I tried to put a transition to .question__answer but I didn't see any effect. Does anyone have any suggestions?
Your answer is very much appreciated! Thank you in advance! :)
Total newbie here! I am having trouble making it responsive, any advice/feedback is much appreciated. Also if there are ways to code the layout more efficiently? Any comment is welcomed :)
Hello! Great effort~ π
Here are some suggestions( or things I think can be fixed)
height setting from .card. Instead, set the height for the image, either in px or other units. I don't recommend using vh or vw for this height. πtop setting from .card. Then, set the body's height to 100vh. (The card is now at center for any size π₯³)h1 and h2 elements. Maybe put a h1 element containing the challenge's title like <h1> NFT card challenge </h1> and hide it using a screen-reader only π class (You can check these out - Ref1, Ref2. Also, read this to find out about heading tags' usage..eth and .time respectively, you can give those two classes this: display:flex; align-items:center;.position:absolute; right:1.5em; on .time to align it to the right, maybe you can try out justify-content:space-between; on .feature. πAwesome work! π
I can't get the region filter to work properly, can someone help me find the solution?
Any suggestions on my html semantic markup ? Feedback appreciated !
Hello! It looks good~ π
Maybe just add the .btn class to the .btn-sign_up directly so that the clicking area is as wide as it looks. That's about it from me. π
