Hacks to make Wordpress sites responsive!
Nowadays, clients not only want their website to look good on desktops but also on tablets and smartphones. Being a front-end developer, you know that optimization for all devices is a nightmare.
The sheer number of devices and blazing frequency of updates is problematic as it is. An emerging concern also deals with newer display tech like foldable screens.
Thus it is very important to know some hacks to make any website responsive, but right now let us talk about WordPress site and issues which concerned it.
1. You know Wordpress website is the largest automated easy website creation tool, as my previous article I have mentioned that WordPress powers 27% of the internet and more than 60% of all CMS websites.
2. It provides different numbers of visual composer, among which WP Bakery is very popular. So one needs to have a piece of good knowledge about it working and the important function of rows and columns.
3. You have to know that, there are 3 stylesheets where you can write your CSS codes, one inside theme option, second in every page and third in custom.
4. Theme option CSS sheets loads at the very beginning of the website, then inline CSS sheet of every page and finally of the custom sheet.
5. The custom sheet has two major important features which you should have knowledge about it, one it precedes other CSS sheets and second the code written on it works on every page.
6. So if you have some section which is common to every page then you should write the CSS code on custom sheet.
7. Give meaningful class name and ID so that during inspection you could easily configure and makes life easy for other co-developer :)
8. You should also be comfortable in using developer tools and real-time stylesheet provided in developer tools.
9. When working on WordPress you should always remember that every page has its own id, which you can find during an inspection or to make life easy just, press ctrl + F and type "page-id-".
10. It becomes easy and your code doesn't collide with other pages as there can be different pages with the same class name.
11. When working as a team that there should be someone responsible who should write the class name and its property as documentation so that others don't confuse and can just simply apply that to their own elements.
14. When adding media queries, always try to put responsive code at the end of your CSS codes and always go from the big screen to small as a lot of sections easily get responsive without much styling.
13. Lastly, try to use more SVG images as they are easy in resizing and have a backup so that if something messed up you can restore it.
I hope you like my article, I would want to know your thoughts and suggestion on it.