search

Charn293 / f1-3-c2p1-colmar-academy

0 stars 0 forks source link

Only write the media query screen size once. #2

Open farishkash opened 6 years ago

farishkash commented 6 years ago

https://github.com/Charn293/f1-3-c2p1-colmar-academy/blob/077cb33fcaa47108d71b90ace2234d70a0ccc2be/Colmar/resources/css/style.css#L386

You are writing this a few times. This can lead to being lost in your CSS. As a general rule write this only once after all your desktop CSS. Then put all your mobile CSS under just one of these.

This does a few things, first, it creates a clear separation between your desktop CSS and your media query. When you have many media queries, it is easy to write CSS in the wrong section. Especially since they are all over the page. This screenshot below is it in the media query or not? I am not expecting an answer but the idea is that with a quick glance and entering in the wrong spot can cause havoc for your site.

style_css_ _f1-3-c2p1-colmar-academy-master

Another reason why you only write @media only screen and (max-width: 575px) is to avoid having to search more for errors. When you write multiple of these, if the CSS is broken in one, it makes it difficult to find the problem. Also when it is broken in one of the media queries, sometimes it carries over the rest of the mobile site breaking the rest of them.

Charn293 commented 6 years ago

Thanks Farish. This is a more sensible approach that you propose. I can see how confusing my code could be. I still have a lot to learn on keeping my code tidy and streamlined. I tend to work through it section by section of the page resulting in multiple repeats. So I do need to work on this. I appreciate your constructive feedback here. Very helpful. Regards, Chris.