@MirTynan
Submitted
Couldn't get the rounded cornered button that I wanted if anyone can help me with that, thank you
@ereljapco
@MirTynan
Submitted
Couldn't get the rounded cornered button that I wanted if anyone can help me with that, thank you
@ereljapco
Posted
Hey, MirTynan!
Try to use rem. 0.65rem worked for mine :)
And if I may add some suggestions:
Re: accessibility
container
inside main.alt="Add a description here"
for the imageRe: style
main
to place your item in the center of the viewport. Consider setting your height to 100vh
style-guide.md
Marked as helpful
@Shayinur
Submitted
@ereljapco
Posted
Hey, Shay! Nice to see your finished solution for this challenge. Just submitted mine, as well :)
Just some few points:
Re: accessibility
container
inside the main
tags and the attribution
inside the footer
tags.alt=""
Re: styles
main
tags, as I suggested, you could set its height to 100vh
and place your container
in the center using flexbox on the main
min-width
on media query) to make your solution more responsive :)Marked as helpful
@icyrockgirl
Submitted
Please provide suggestions and improvements for my code. It would be really helpful. π
@ereljapco
Posted
Re: styles
select
should be be light grey colored, while the hover
state should be the orange coloredcursor: pointer
Re: accessibility
main
tagfooter
tagalt=""
More information regarding accessibility here https://www.w3.org/WAI/tutorials/images/
Overall, great job on finishing the challenge! Hope to see more finished challenges from you :)
Marked as helpful
@VANIMEHTA
Submitted
1)Can somebody pls tell how do I put the dollar-sign and user img in my button placeholder. 2)Also my java script is not working fine,it would be great if u suggest changes.
@ereljapco
Posted
Hello!
<div class="bill__input-container">
<p class="bill__dollar-sign">$
<input class="bill__input" />
</div>
tipchoosen
, which is a nodelist, to get the value of the button clicked. tipchoosen.value
returns undefined
. Instead, use the event.target
to get the value.Some things I noticed that you could look into:
NaN
is appearing when billVal
is empty. You can add an if
condition so you can set a value to billVal if it becomes empty.Marked as helpful
@blurrypxl
Submitted
Hello everyone π this my another solution from frontend mentor challenges. Please let me know if you have any suggestions. Thank you π
@ereljapco
Posted
Hello, Alif. Great work! Tried the functionality of your work. The amount backed and number of total backers is updating, however the number of items left isn't.
Marked as helpful
@Jitesh117
Submitted
I have made my site responsive but I'm struggling to change the equilibrium image's background color on hover. Please help me with this
@ereljapco
Posted
You can make the on hover effect by adding a div inside the div container of the equilibrium image. Then add the view image inside the newly created div. Make use of the position property where the new div is placed on top of the equilibrium. Set the background-color of the new div to the primary. Then set the opacity of the new div to 0. Then set the opacity of the new div on hover to 0.x.
For the accessibility issues, you can use main tag instead of div tag for the div.container and footer tag for the div.attribution.
Marked as helpful
@gchristofferson
Submitted
I'm wondering if there is a more elegant solution to the offset positioning of the review and testimonial boxes? I offset them by first setting the position to relative for all boxes and then by selecting the appropriate :nth-child(). I then adjusted the bottom or left positioning. I'm sure there is a more elegant solution and if you know of one I would love to hear your feedback.
@ereljapco
Posted
What I did was used flexbox, then used justify-continent for the reviews and align-self for the testimonials :)
Marked as helpful
@Jiao-Liu
Submitted
any suggestion will be much appreciated!
@ereljapco
Posted
Hello! It looks good. But I think you can maximize the use of the <body> and <main> tags. On your CSS, you can transfer the properties of the .main-container to the body tag and the properties of the .wrapper to the .main-container. Then add the class .main-container to the <main> tag and change the <header> tags into <divs>.
And for the CSS, you can still add styles to the <button> tags.
Good job! :)
@JoeSpin
Submitted
I struggled greatly with lining up the content properly. Is there a better way to do so than wrapping everything in divs?
Also the background didn't look 100% right. Was wondering what I did wrong there?
How do I make the shadow match up as well?
@ereljapco
Posted
Hello! Just finished doing this, too :)
For the background, you're using the background-image for the mobile design on the 1440px design and I think you forgot to add the background-color.
You can add blur to the shadow :)
@Alexandre-Chs
Submitted
Hello !
I had some worries ..
My mobile height does not work. I cheated by putting a color in the background, but it's not good. I should have done?
I had a problem with my SVG, I had to give a height and width on the HTML, because otherwise impossible to make a circle correctly .. a viable solution?
Why the page load, i have a scroll bar ? I think is because i use animation with negative numbers.. right ? How to solve the problem ?
If you see other worries, do not hesitate! First time I have to organize my code "proper, it's not easy at all! But it's a habit to have. Thank you ! β₯
@ereljapco
Posted
I'm doing this challenge, too :) I love the animation you did! I wish I could implement those in the future, as well.
You can set the position of the background image as top and set the width to 100% if you intend to make it look like the design preview then make set to scroll.
Is this for the icon SVG? If so, you can put a class on the <link> tag then place a circle border.
To remove the scroll on the desktop view, you can add "overflow: hidden;" on the body.
Let me know if you encounter any errors, so I could check back on my work. Cheers!