@Zoksss
Posted
Hey, I achieve that changing image with simply adding empty div for image (no image in html) and after you can change image trough css with background-image: url(); and based on responsive you can change it afterwards easily, but I have seen people also use 2 img tags for 2 images, and then they hide one they don't need trough css.
Responsive looks alright, but you have multiple declaration of same thing. Eg. in .container { color: white; } and you have exact same thing in responisve down. You should remove unnesasery lines. Also you can look up mobile first responsive, which in my opinion is kinda easier, but its important nowdays.
Also you could learn SCSS which is CSS preproccesor, its basicly CSS with more cool features. You will still learn CSS, but you will increase productivity, and its pretty much standard today.
Hope this helps :)
Marked as helpful
@HYDROCODER
Posted
@Zoksss Thank you for your feedback! I will try those methods for changing images as you said and yeh you are right, I should use scss more but I kind of like bare css as I dont have to remember the new names I gave to the colors, but as you said it is more productive and for the next challenge I am using scss variables.....Even though responsiveness seems ok to me it comes crashing down when images are involved. Unfortunately images just get messed up one way or the other when using them but since it is inevitable to use them I am trying to get comfortable with them and I hope I will get better at them..... I have a query though, so are you implying that if we declare a media query for a particular block of css code and if we want to change only some of it's properties, will the unchanged properties get inherited automatically even if we don't mention it in the media query(like the color property)?
@Zoksss
Posted
@HYDROCODER yes, you need to change only properties that you want to be changed, if for eg. color of text is the same in both layouts (desktop and phone) you don't have to write it again in media query.
