Design comparison
Solution retrospective
Hello there, I've tried to make this responsive with react. When I lower the screen height my top element goes beyond the border and I can't scroll to see what's there. How can I solve this?
In summary section I mapped through data.json to list the results. But in order to change both text color and background color I put two more properties inside data.json as color and bg-color. And in <li> I put them inside style attribute. My second question is; What kind of logic should I implement to use right colors without altering data.json?
Community feedback
- @doganfurkanPosted over 1 year ago
Adaşım merhaba, işimi kolaylaştırdığı için direkt Türkçe yazacağım. (If you don't know Turkish let me know). Öncelikle mobil görünüm için container'ının position: absolute'a, kesin height ve width'e, transform'a ihtiyacı yok. width:100% height:auto; işini görecektir. Bu düzenleme üst kısımda görülemeyen "Your Result" yazısını ekranın içine almaya yetmeli.
Renkler konusunda da React'tan faydalanbilirsin. Eğer summary'deki her bir li'yi (ki ben olsam div kullanırdım) bir component haline getirip json'dan aldığın veri sayısında componenti yazdırırsan ve de component'e rengi props olarak geçersen arkaplanda aynı rengin saydamlaştırılmış halini, yazıda da rengin kendisini kullanabilirsin.
Bunların dışında birkaç renk ve boyut hataların bulunuyor.
Umarım karışık olmamıştır. Yaptığın iş için tebrik ederim. Eğer yorumum sana yardımcı olduysa "Mark as useful" dersen memnun kalırım. Kolay gelsin!
1@frkanyilmaz2Posted over 1 year ago@doganfurkan Hocam teşekkür ederim cevabınız için. Ama Öncelikle mobil görünüm için container'ının position: absolute'a, kesin height ve width'e, transform'a ihtiyacı yok. width:100% height:auto; işini görecektir. Bu düzenleme üst kısımda görülemeyen "Your Result" yazısını ekranın içine almaya yetmeli. dediğinizi yapmaya çalışınca tüm ölçüler kaydı.
Diğer tarafta da anlamadığım birşey de li yerine niye div kullanmadığınız. Aradaki fark ne? Teşekkürler.
0@doganfurkanPosted over 1 year ago@frkanyilmaz2 evet elbette ölçüler kayacaktır çünkü ekrana oranlı bir tasarıma geçmeni savundum ancak senin yaptığın tasarım sabit width ve height üzerine kurulu. Sabit olduğu için bazı alanlar ekrana sığmıyor zaten. Eğer benim dediğim gibi adaptif bir tasarıma geçersen cardların içerisinde gap, margin ve padding ayarlaması yaparak istediğin görüntüyü elde edebilirsin. Eğer örnek görmek istersen benim projeme buradan bakabilirsin. Tarayıcının "İncele" veya "Ögeyi Denetle" seçeneklerini kullanarak pozisyonlama işlemlerime bakmanı öneririm.
Li yerine div kullanmayı tercih etme sebebim ögeleri kendi yapılma amaçlarına uygun kullanma isteğim. Li ile de sorunsuz bir şekilde tasarımı gerçekleştirebilirsin ancak orada içerisinde farklı elementleri barındıran bir "container" olduğunu düşünürsek div'in asıl var olma amacı bu. Li'yi listelerde kullanmak da amacına uygun olur.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord