@haquanq
Posted
Hello Lyna 👋
Nice work here, although still many things to improve:
- When using
display: flex,flex-direction: rowis default behavior so it is unnecessary to declare it. - Most html elements (some element will be stricter and need to specify it like
a) will inherit the font style from it's parents, so try and set thefont-familyin the parent element and remove allfont-familyin child elements and see, same to thecolorproperty. - Take some research on
remunit (relative size to root font size - normally 16px, so that when user zoom-in browser the font can scale up respectively) and use it onfont-size. - You can use
border: 1px solid blackfor example for short. - Start practicing with media queries for responsiveness (below is an example)
/*
max-width is when screen getting smaller
min-width is when screen getting bigger
*/
@media only screen and (max-width: 600px) {
.div-container {
flex-direction: column;
}
}
Keep it up, happy coding 😁
@djelidlyna
Posted
@haquanq heeyy👋🏻 omg thank you very much for all those informations i Will make some changes , 1\yess i know rem i used it in the first 2 project thinking that it would solve all the size screen problem but no and does not make sens the 2 project when i submit them they became a desaster not like in my browser, i suspected also on position (relative , absolute) that i used . 2\when i make some changes do i need to remove it and re submit it? 3\thanks also for the media option🫡 4\all those projects that i did the look perfect on my browswe but a pig screen size on other's browser 😭
@haquanq
Posted
@djelidlyna are you using your browser dev tool for development? Would be better to see how your page react to different resolution with dev tool (F12 on browsers)
Using rem is not fun when the number is odd, like 29px would be 1.8125rem (16px == 1rem). To me i am using an VSCode extension for math (use shortcut to calculate divisions) so it is much faster.
@djelidlyna
Posted
@haquanq yes i agree, i appreciate all your help , what dev tool ? i use the vscode extension (live server) to see my work
@haquanq
Posted
@djelidlyna For example in chrome dev tool, we can stimulate different screen size by pressing CTRL + ALT + M
@djelidlyna
Posted
@haquanq thanks a lot
@haquanq
Posted
@djelidlyna i've completed this challenge recently, you can check out mine for references
@djelidlyna
Posted
@haquanq i will thanks for informing me , have a good time
