In this challenge, I utilized only HTML and CSS. Please let me know how I can enhance this code. Kindly consider the following key points:
Hello @rohmatsetiawanmta. I hope you're fine.
You must use semantic tags to make it more accessible.
Your code is organized well and easy to read, but your layout is not responsive when it comes to size 750px due to:
1- You remove the width 100vw on line 50:
.app { background: var(--very-light-blue); height: 100vh; display: flex; justify-content: center; align-items: center; }
2- You remove the display block and put height auto on line 200:
@media screen and (max-width: 750px) { .app { background: white; height: auto; } }
With these changes, your website is responsive for any screen.
I found the responsiveness kind of difficult
I'm unsure if this site is going to look good on a wider desktop screen like that of a width of over 1500px
Hello, Emmanuel! Your website is working well it looks good on a broader desktop screen like that of a width of over 1500px. However, when the website achieves max-width: 700px is created a horizontal bar because of the height right here:
@media screen and (max-width: 700px) .photo img { /* height: 450px; */ border-top-left-radius: 9px; border-top-right-radius: 9px; border-bottom-left-radius: 0; }
You shall put height: 427px;
@media screen and (max-width: 700px) { .photo img { height: 427px; border-top-left-radius: 9px; border-top-right-radius: 9px; border-bottom-left-radius: 0; } }
And after everything is going to be ok.
Hola todos.
Queria pedirles ayuda en este proyecto con el manejo de una imagen SVG, la cual cuando la pantalla cambia a la de un movil, la imagen SVG no se ajusta.
Alguien me puede ayudar con este problema, necesito algo de ayuda.
Hola, Carlos!
La solución para que la imagen svg se ajuste es eliminar el tamaño de fondo: contiene en la línea 141 de su archivo styles.css:
@media (max-width: 411px) .stats_img { grid-row: 1/2; background-image: url(../images/image-header-mobile.jpg); background-size: contain; // aquí }
Creo que esto resolverá tu problema.
Si lo desea, también puede eliminar el tamaño de fuente del cuerpo:
body { font-size: 15px; }
¿Resolví tu problema?
Is my use of flexbox correct? Is it ok to refer in CSS to specific elements by using Class instead of ID? It feels cleaner and simpler. Is there any bad practice in my code that I should be aware of?
Thank you
Hello, @MZ1M4K! It's better to use class instead of ID like you said it's cleaner and more straightforward. But you should use ID only to select a specific element (1 only). For example:
<!DOCTYPE html> <html> <head> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>Only the first paragraph has the color red; Your file only can have 1 ID and not more. Use ID only for specific cases even choose to always use class.
Talking about your code don't put space for example here:
<div class=" item-sedan item">You should put:
<div class="item-sedan item">And as for the rest of your code I think it's ok.
How is this? I had a hard time setting a proper height. please, give me a suggestion if you have any! Thank You.
Hey, KJ! I found a solution for you:
main { height: 900px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; }
@media only screen and (min-width: 1000px) main { max-height: 713px; margin: 0 auto; }
On tag main, you remove the width: 1440px; And on only screen and (min-width: 1000px) you put these settings on top.
Who helps me fix the bug? when I zoom out the screen I see the sidebar animation . Thank you!
Hello, Alessio! It would help if you replaced margin-top: 1em with 14px on line 36 of the file "style.scss" on .header. These are your settings:
.header { display: flex; align-items: center; font-size: 15px; margin-top: 1em; width: 100%; }
Put margin-top with 14px:
.header { display: flex; align-items: center; font-size: 15px; margin-top: 14px; width: 100%; }
If you do it, your problem is going to be solved, in other words, the sidebar.
I had some problems selecting all the radio inputs with queryselectorAll, because I could never handle how to make the events happen only to the selected input. Every time made all the changes in every input. If someone can tell me how to avoid that or share a link where I can see the resolution of that I would be really grateful.
Hello, Saul! As far I as know for you to select all the elements radio inputs you can do -> document.querySelectorAll('input[type=radio]'); I also have some difficulties selecting all the elements type input but search on Google and you are sure going to find out the solution for you. I always look on W3Schools for example and other websites such as StackOverflow, on Youtube, or with the communities that I have on Discord.
For now when I'm doing these challenges, I just put all the files in the main folder. I'm guessing that's not good practice in the long run. What is the best practice for organizing/naming these files? How should I properly separate these html, css, and media files?
Hello @min4899, the best solution is to divide each file into a folder less the file index.html. For example, if you have the file style.css you can put it in a folder named "css" this is also for other files such as javascript, react etc you put each file in a folder. About the name you put the name what the file means, for example, if you have 4 files about HTML and three are about tables you can create a folder named "table" and you make: table001.html, table002.html, table003.html and index.html. Did you understand?
