@fico444
@Prakash1411
Submitted
I'm having issues with adding padding/margin at the bottom of mobile view. Tried adding padding & margin to the main & body but no space is occurring at the end the page in mobile view. Please help me out, if anyone knows this trick. Thanks!!
@fico444
Posted
Hi, good solution. I think I know where the problem is. The height of the main is set to 100px, so there is no space to add margin or padding. This also causes its content to overflow. You could fix it by changing 600px to 100% or giving it more height in px. I hope I have helped you. 👍
@AbuKesh
Submitted
Feedback Welcome Find difficult to make the two containers equal? Don't know a lot about CSS Grid?
@fico444
Posted
hello, I give a few tips... The more easy way to do this is using flex. You need a parent container with de display set as flex, by default display-direction is set as row, this makes the two containers inside sit next to each other without needing to use display: inline-block (for movile you must set display-direction: column using media queries). The containers have different heights because if the height property is not set, they adapt to their content using the height of their parent container as the maximum height, in this case, body. I hope I helped you. If you want, I invite you to see the solution in my profile. Surely my solution is not the best and it can be improved but it can serve as a guide. See ya 😉
Marked as helpful
@mailacss
Submitted
@fico444
Posted
Hi Maila it's a nice solution. I only found a detail: If the user does not select any rating and presses submit, the script shows the thank you card. It must show a warning or a message. You can solve this by declaring ex as a global variable, calling from the HTML only the hide function, and adding a check inside it. Something like this...
var ex = 0;
function esconde(el) {
if( ex == 0 ){
alert("message");
}else{
var display = document.getElementById(el).style.display;
if(display == "none")
document.getElementById(el).style.display = 'block';
else
document.getElementById(el).style.display = 'none';
mostra(el);
}
}
I didn't test it so it may have some error but that would be the idea... I hope I have helped, regards 😉
Marked as helpful
@abhinavrai10
Submitted
Need feedback on code quality and functionality
@fico444
Posted
Hello, good solution. I only have two recommendations.
@HawkEyeB
Submitted
Hey. This is my second challenge using JavaScript, so I tried my best to do what I knew at the time. I would like all possible feedback on the JS part of how it could be done, what I could change and how this challenge could have been solved in a simpler way.
@fico444
Posted
Hi, congrats it's an excellent solution. I only found two details:
Marked as helpful
@JuanValencia247
Submitted
Todos los comentarios son Bienvenidos!
@fico444
Posted
Hola, buen trabajo, quedo muy parecido al diseño original. La unica recomendacion que podria darte es que reemplces los span y los p de tu codigo html por encabezados del tipo h1al h6 ya que estas son etiquetas semanticas y ayudan a la accesibilidad y el posicionamiento CEO. Por lo demas todo perfecto, espero haberte ayudado en algo. Saludos.
@nzewi
Submitted
<picture> element difficult, I'm wondering if there is a better solution. Is there a better way of achieving the same result?@fico444
Posted
Hello, the correct way is using picture tag, but there are other ways to do it. 1- Using background-image. in the @media code block just change the url of the background-image. 2- If you want to use img tag on your html you have to use two, one with display: none (remains hidden) and other with display: inline-block. Then in the @media code block switch the values to display the correct image. I hope I could help you. ;)
@Nondaba
Submitted
I encountered difficulty while I was applying media query for phone screen size, I did not know how to change the desktop design image to a mobile design image. Did I use the correct HTML mark up? Are my styles for elements suitable for phone screen size?
@fico444
Posted
Hello, i solve that using background-image. in the @media code block just change the url of the background-image. If you want to use img tag on your html you have to use two, one with display: none (remains hidden) and other with display: inline-block. Then in the @media code block switch the values to display the correct image. Sorry for my english, I hope I could help you. ;)
Marked as helpful
