1. Go to View < Developer < Developer Tools. A window will appear at either the bottom or right side of your browser. This window shows you the code used to run this website.
2. At the top-left corner of this new window, you will see a magnifying class. select it.
3. Now hover over elements of your mouse. As you hover over them, they will highlight. In the Developer Tool Window, you will see "style" information change and update.
Here's the example - Finding the exact hex color for the pink background of Charmingly Styled's Site - #ffe7ee. See if you can find it on your own!
There's a few things I want to note here:
+ This can get very confusing depending on how much you know with code and how your designer developed your site. The element you are highlighting should have the same color and font as you see in CSS window, if not scroll up or down.
+ You will also see elements with lines struck through them. This means that in the CSS stylesheet a subsequent style overruled what is struck out.
VIEWING BLOG ON MULTIPLE PLATFORMS: This method does not work if you have the responsive functionality disabled from your blogger site. I'm using 312Beauty as an example.
1. Next to the magnify class, you will see a smartphone looking icon. Click it.
2. For "Device" select the device you'd like to view your site on.
3. You can use the swap icon to switch views from horizontal and vertical layout.
If your site looks messed up on a mobile version (i.e. cell phones), check it with your phone. If it is messed up on your phone, in most cases, you can assume it is messed up on a majority of smart phones. To fix it, you have a few quick (and free options), by enabling Blogger or WordPress versions or use a third-party plugin to make it responsive. I believe that these are short terms solutions. With these solutions, one loses his/her individual branding of the site, and it is not the most curated experience. As more and more blog readers are coming from mobile, this might be a big reason you want to address.
Firefox has a similar developer tool, but Safari does not.
To read more about developer tools, I recommend these links: Developer Tools Tutorial from Google Chrome // Youtube Video for the Visual/Experiential Learners // HTML5 Rocks
Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at email@example.com, and she will answer them in her weekly series.