@rapha0311
Submitted
The biggest difficulty found was related to the positioning of the elements in the css.
Loo_cee
@Loocee
All comments
- Loo_cee• 230
@Loocee
Posted
Hi, maybe you could align the texts in the body to center
body { text align: center; }
I think you should also remove the height property from your container so it can adjust to changes
Add margin top and bottom to the content in your container excluding the button, so they can be evenly spaced.
Rather than leaving your page empty till the user clicks the button, I think you should add some content like Advice #117 as given in the design files.
I hope this helps and happy coding.
Marked as helpful
0 @JvModesto1
Submitted
Hello guys, have one bug in the project, that is, if you select one number(like the number 3 for the rating) and after that you select other number (like the 5) and submite for the thank you mensage, in the part of the message appear a message for every number you select... anyone knows how to fix it?
Loo_cee• 230@Loocee
Posted
Hi Modesto, well done in completing this challenge. Now to get you JS to execute properly, you don't need to tap into the data rate attribute, infact i think it's not even needed in your HTML or JS. To get the value of the button selected, you just need to use the .innerHTML() method and you'll be able to tap into the value and then use conditions e.g if .... (innerHTML === 2) { div.innerHTML() = you selected 2out of 5}
0- banana21311• 170
@stevop
Submitted
Hello, this was quite a challenge for me.
Page acts good on iphone and ipad, but I am not sure about responsivity on other devices. I also didn´t know how to add backgrounds and img to the footer.
Could please look into my code and give me some advices? I would really appreciate it!
Thanks a lot!
Loo_cee• 230@Loocee
Posted
Hi Steve, great job you have done in trying to replicate the website, but you were only able to replicate the mobile design here. Have you tried building desktop first and then making changes for the mobile state? I think you should try that. Here are a few things you can add to your code to achieve the desktop layout:
- Visit (https://www.educative.io/answers/how-to-create-columns-in-html) to help you add columns in your row div.
- For the background, here are some examples to help you add the background: HTML
</div><div class="container-fluid"> <div class="row bg-row top-desktop1"> <-- This is the div for the background --><div class="row blue-row"> <div class="col-md-6 col-sm-12 mobile center"> <img class="human-icons" src="images/illustration-grow-together.svg"alt="Grow together illustration">
</div> <div class="col-md-6 col-sm-12 center"> <div class="grow-together"> <h3 class="margin1">Grow Together</h3> <p class="margin1">Generate meaningful discussions with your audience and build a strong, loyal community. Think of the insightful conversations you miss out on with a feedback form.</p> </div> </div> <div class="col-md-6 col-sm-12 desktop center"> <img class="human-icons" src="images/illustration-grow-together.svg" alt="Grow together illustration"> </div> </div> <div class="row bg-row bottom-desktop1"> </div> </div> </section>CSS
.top-desktop1{
background-image: url(images/bg-section-top-desktop-1.svg);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
You'll need a div in your row div to add the background image. To understand more on how it works, visit (https://www.w3schools.com/cssref/pr_background-image.asp).
I hope this helps and I'll be glad to give more explanation if you still need any. Happy coding :)
Marked as helpful
0 - zeuhzDroid• 210
@Zeuhz-Droid
Submitted
NOTE : ⚠️ Since it's a project on card details, it's flagged by Google as a malicious website, just ignore and visit site still, inputting "dummy" details to test ⚠️
Thank you.
Loo_cee• 230@Loocee
Posted
Hi, i couldn't preview your site. I think you should rename your repository or url so it can be accessed. Try adding a name that doesn't contain the word "card", so we can access it.
Marked as helpful
0 - Godwin Okechukwu• 20
@godwin-okechukwu
Submitted
Hello, everyone! I am so excited to have completed my first FEM challenge. I struggled with margin, padding and sizing the <h2> and <p> tags to resemble the challenge design.
How could I have done it better?
I really didn't know what to do with the FEM mascot, so I left it off entirely from my solution.
What could I ahve done with it?
Loo_cee• 230@Loocee
Posted
Hey, great job on replicating. However I noticed your work isn't in the center. Try using Body { Display: flex; flex-direction:column; justify-content:center; Align-items: center; min-height:100vh; } I also don't think the <small> tag was necessary, you can always change the font size of the <p> tag. Hope this helps and happy coding
Marked as helpful
0 - Aman• 630
@AmanGupta1703
Submitted
- I am finding it difficult to get a hover effect on the image 😕
I would like to hear your feedback! 😊
Loo_cee• 230@Loocee
Posted
Hey, great job on replicating. Well to get the hover effect correctly, you have to set the nft image as the background image for the div and then using a before pseudo class, set the content of the div as " " . Then you can add an hover effect to the pseudo class and set your background image and color. I hope this helps.
Marked as helpful
1
