@RedDotz20Submitted over 1 year ago
based on my current styles/css how can I improve my code in terms of responsiveness?
William Boehringer
@williamboehringerAll comments
- @williamboehringerPosted over 1 year ago
Hello Carlos, congratulations finishing this challenge!
I quickly took a look on your code using the browser dev tools and I think the major problem with your responsiveness is the fixed value for the body. If you remove the height property from your body, you'll notice that your whole page will still be shown, even in small screens, wich isn't the case by now. Instead of giving a height value to your body, do it to the container that wraps your content, use min-height with value between 90 to 95svh. It will ocupy the most of the page in any sizes, and if you extremely reduce the page height, it will adapt and you wont lose any content, will just have to scroll the page to see, like it supposed to be.
Overall, you did really well in your attempt. Hope I've helped!
Marked as helpful0 - @kalkslucasSubmitted over 1 year ago
Hey! Could you give me your feedback please? I did this project some time ago, but only now am I uploading it to the platform and I am resuming my studies on Web tools.
@williamboehringerPosted over 1 year agoHi Lucas, Greetings from another Brazilian!
Looking briefly at your code, I could notice some points that may help you improve considerably in this challenge and in many others.
The first thing I noticed is that you've used the flexbox. It's a personal choice rather to use flex or grid, but I will give my sincerely opinion. It's way easier in this case to use grid, you would certainly write less code and get the same result, i suggest you take a look at it, search some videos on youtube about grid and how to use it. In this case you would divide your div "conteudo" in 3 parts, and use the property "place-items: center", instead of position absolute to center the whole thing.
Another advice would be to use height and width instead of padding to give the size you want to your columns. Sometimes use padding is good, but in cases like this is definetily not a good option, specially using fixed values. The fixed values will be annoying to deal with when you start making things responsive.
For now, I think that this advices should give you some things to work and some tools to. Hope I've helped, keep on going and good coding :)
0 - @AhmarIftikhar123Submitted over 1 year ago
Please! Check my effort and gave me suggestion for improvement.
@williamboehringerPosted over 1 year agoHello, greetings!
In first place, congratulations for completing this challenge.
About my suggestions on your improvement, I think you could improve a lot by taking care of some few details, like adding the right font-families and color scheme to your project. They are all included in the style-guide file in the project starter pack that Frontend Mentor provides. Also, I took notice that you used a solid shadow-box, this isn't really a thing in frontend design, it may be the right choice in some cases, but when you're dealing with something like this challenge you would definetily use hsl color to make it semi-transparent.
Another suggestion is to use "gap" property or "align-content: space between" in your div with "h1" class. By using this properties you can get rid of margins and make things more fluid and responsive. Margins are fixed values, wich are pretty bad and annoying when it comes to make a page responsive.
Well, these are my general advices, I hope you'll find them, helpful! Keep improving and good coding :)
0 - @Leone-RicardoSubmitted over 1 year ago
Here's another completed challenge. This time I decided to make this form which contains pure HTML/CSS/JS. If you have a better solution, please let me know. I'm always willing to learn new ways to perform and build good programming logic. <3
@williamboehringerPosted over 1 year agoHi Leonardo, greetings from another Brazilian!
You could improve a lot your challenge by simply working on your sizing and spacing between things and adding the correct font families. I don't know if you are aware, but you can find the fonts in the style-guide provided in the challenge files.
Your mobile version seems pretty good to me, but you are using the desktop image instead of the mobile one.
Anyway, good job and keep on working :)
Marked as helpful1
