The Marsden Marketing Blog

Subscribe to Our Blog

Subscribe Here!

    How to Troubleshoot Your Hubspot Page Styling Woes

    Written by Brian Bicknell on August 25, 2016

    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.”

    Inspect-1.jpeg

    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.

    Screen-Shot-2016-08-25-at-8.28.28-AM.jpg

    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.

    Screen_Shot_2016-08-25_at_10.52.42_AM.png

    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. 

    Screen_Shot_2016-08-25_at_11.03.01_AM.png
    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.

    Subscribe To Our Blog

    Topics: Website Design, Graphic Design

    Grow or Die: 

    Build Your B2B Growth Plan 

    Get the Guide
    Marketing Agency in Atlanta, GA

    Want More? We're always here!

    Subscribe for notifications

    OR

    Talk to us