Web Design Tips and Tricks

On a 2560-pixel monitor, the text column of my blog was 867 pixels wide. Not 33%. Not the result of a media query. Eight hundred and sixty-seven pixels, at every window size, forever. Here is how I found the number, and what a fourteen-year-old Blogger template teaches about how layouts get stuck. The template is Awesome Inc. , designed by Tina Chen and shipped with Blogger since around 2011. If your blog is more than a few years old there is a decent chance you are running it, or one of its siblings, and a decent chance you have already tried to widen it from the Template Designer and failed. The reason you failed is interesting, so let's do the archaeology properly. Finding the number Start by not opening dev tools. Open the template XML and search it for every declaration that sets a width. You are looking for one specific thing: a length that is not a percentage. A fluid layout that feels cramped is a padding problem. A layout that is exactly as wide on a ...

https://www.dukelearntoprogram.com/course2/doc/javadoc/index.html?course=2 Go there and, if you have OCD like me, you ask this question : And the response  (takeaways : CTRL-SHIFT-C to point and select an element. And you get the element.style {} standing by to let you tweak it! Also, height:75vh; in CSS gives you 75% of the viewport. Thank you Upwork. How to open Chrome dev. Tool :-  CTRL-SHIFT-C How to tweak CSS and change CSS of the page ? ● In the dev tool in the Elements window there is a tab (or section ) named Styles. ● You can add new css rules and remove the old rules i this section ( NOTE: these changes are temporary and will be removed after the page is reloaded ) How to target the section whose style you want to change? ● There is a small arrow key in the top left of the dev. tool.   ● Select that tool or just press CTRL-SHIFT-C again. ● Now hover over to the section you want to modify and click on it.  ● Make sure to select the outermost...