Has your template purchase turned into a hassle? Are you trying to make a landing page but are running into more styling obstacles than a Kardashian? Troubleshooting rendering issues on Hubspot pages is an interesting challenge due to all of the moving parts – you may have custom programming, purchased template CSS files, a Design Manager template, a page made from the DM template, and an end product to consider. If something looks wrong on the page, how the heck do you find out what’s going on when there are so many different parts? The guess-and-check method can leave you in the dark for hours with nothing to show for your work. Luckily, there’s a light shining in the darkness – “Inspect”.

The Basics of “Inspect”
Do you know how to use your browser’s inspect feature? You should – it’ll make troubleshooting your Hubspot pages a cinch. Basically, the inspect tool allows you to peep into the HTML and CSS that are at work on your page in a relatively intuitive way. Firefox, Chrome, and Explorer all have inspect features. For this tutorial, I’ll focus on Chrome’s version, but they are all similar. In Chrome, right click on the area in question on a webpage and click “Inspect.”

This will bring up the windows you see at the bottom of the screenshot below. In the left hand pane you’ll see the html for the page, and in the right, you can get various perspectives on the CSS for the page.

You can focus in on a specific div, text, image, etc. by hovering over different HTML lines in the left window. You’ll notice that as you hover over different lines of HTML, corresponding elements will highlight on the web page. Use this as your guide to finding the bit of HTML that is relevant to your issue. When the element you want to inspect becomes highlighted on the webpage, click on that line of code in the left window of the inspector (Tip: To see elements contained within other elements, click the little arrow to the left of the HTML line). In the right window, you’ll see the CSS styling that applies to that element.

Using “Inspect” to Troubleshoot
Now we can begin to solve our mystery. Scroll down the right window until you come across a word that looks like it could apply to the issue you’re experiencing. Words like “color” and “font-family” are pretty obvious. Others may require some quick research.

Here’s the brilliant part: A style is crossed out in the right window when it is being overridden by another style. Chances are, if you are trying to style something, but it’s not rendering on the final page, you will notice that it is crossed out in the inspector. 

You can quickly see the styling that is overriding yours by clicking the “Computed” tab at the top of the right window. Scroll to the relevant CSS attribute, and click on it. To the right you will see the source of this style – often it will simply be a CSS file you didn’t know was hijacking your design. Sometimes, it will have something ambiguous or some strange developer-speak. Don’t worry - this is often a clue that the style is coming from one of Hubspot’s built-in design tools, such as the CTA builder. 

In the above example, the highlighted row is the text color of an element on the page (selected from the left window). You can see on the right that the source of this style is “setup-style.min.css.”

Once you know where the styling is coming from, or at least have a good idea, you are then equipped to go to the source and change it. The “Inspect” feature has even more goodies than what’s described above, so spend some time and get to know it. You will more than likely find that it saves your page-builder butt at some point in the future!  

In my next installment: Taking the Guesswork out of Designing Emails. Be sure to sign up for the Marsden Marketing blog to get more helpful hints to guide you in your Inbound Marketing journey.