• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » How To Customize Your WordPress Themes

    Use Inspect Element to troubleshoot styles

    One of the most common questions we get has to do with white-spaces and element widths, which are usually caused by the CSS margin or padding property on an element (an HTML component) of a webpage. Solving this involves two parts:

    1. Find the element causing the issue, and then identify the CSS property using inspect element
    2. Make a customization/change to the class to fix the issue in Admin -> Appearance -> Customize -> Additional CSS

    Inspect Element is a necessary tool for anyone running a website or blog.

    Everyone can access it by right clicking on the element you want to inspect, and clicking on "Inspect" in Chrome and Safari, or "Inspect Element" in Firefox. No plugins are needed.

    genesis theme inspect element

    It's important to be aware that what you see when you're logged in as an Admin, and what users who aren't logged in see, are often different. We recommend using Chrome or Firefox (or Safari on Mac) to do your admin management, and another browser to view your website like a user that isn't logged in.

    Right clicking on an element and using "Inspect Element" gives you a list of CSS properties and computed layout options. In most modern web browsers, you can even edit the CSS in the "inspect element" to see live changes to your site, but these changes are not saved and are lost when you leave the page or refresh. It's a great way to troubleshoot.

    Jump to:
    • Inspect Element Components
    • Learning CSS
    • Firebug
    • Ads & Ad Blockers
    • Disabled Right Clicks

    Inspect Element Components

    inspect element h1 entrytitle

    Here's a breakdown of what you see in the "inspect element" feature.

    • The highlighted blue portion shows the element that's being inspected, with the highest level attribute (h1.entry-title)
    • The orange below visually displays this element's margin-bottom property, and in this case indicates there are no side or top margins and no padding properties by the lack of being displayed.
    • In the new "Elements" window that appears at the bottom (or side sometimes, depending on your browser setup) you have a modified view-source that removes some source code, while formatting (indents and color coordination) the more relevant parts
    • At the very bottom you'll see a consecutive list of elements that are "parent" elements going from left to right, of the element you're inspecting. Each of these has a possibility of passing on properties to the inspected element through "inheritance", where properties such as background-color and font-style are passed along to nested elements.
    • In the bottom-right you'll find the "Styles" and "Computed" tabs, which show you the final properties of the element you're currently inspecting. Here we see that the h1.entry-title is being given the "color: #323545;" property by (index), which is CSS embedded in this page.

    With this information, if we wanted to change the font color for the h1.entry-title element, we can go into our Admin -> Appearances -> Customize -> Additional CSS page and add our own entry like:

    h1.entry-title {color:red;}

    Or any hex color value in place of "red".

    For further reading, see: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

    Learning CSS

    Not familiar with CSS? It's fairly basic and can do almost everything you need to from a design perspective. Learning how it works is like seeing into the Matrix for the first time. Things you never knew were there suddenly become apparent, and the ability to change the web is powerful. We recommend checking out the following:

    • https://www.freecodecamp.org/challenges/say-hello-to-html-elements
    • WordPress information on "editing CSS" (see tutorials at bottom)

    FreeCodeCamp is a personal favourite of ours. It gives you short, specific tasks with an interactive editor, that accumulate in skills as you progress. The encouragement you get after completing a task is corny at first, but surprisingly addictive. Best of all, there's no chance of messing up your own website, so you can edit to your heart's content.

    Firebug

    A browser plugin called "Firebug" used to fill the role of being able to inspect an element years ago, but modern browsers (Chrome, Safari and Firefox) have incorporated this functionality right into the browser.

    Ads & Ad Blockers

    Ads are one way that bloggers can earn additional income, but seedy ad networks have ruined the public's trust with tracking, and obtrusive popups and autoplaying videos have ruined so many peoples experience that ad blockers are ubiquitous. Keep in mind that if you have embedded ads in your website, those spaces may simply appear as blank white spaces to people using adblockers.

    Disabled Right Clicks

    Some website owners have opted to use a plugin or javascript to disable right clicking in an attempt to prevent copy+pasting and saving images.

    Don't disable right clicking.

    All this does is irritate your visitors and make life more difficult for yourself. It does absolutely nothing to stop content theft.

    Accept the fact that anything you put online can be copied and stolen.

    This will stop the inspect functionality. As a best practice, we don't recommend attempting to disable right clicking as a preventative measure - it can be defeated in a number of ways including:

    • automated web scrapers
    • disabling javascript
    • screenshots
    • printing to PDF
    • simply typing "view-source:" into the browser bar before a URL

    Primary Sidebar

    How To Customize Your WordPress Themes

    • How to Create Multiple Recipe Index Pages
    • How to Set a Favicon
    • Plugins to Install
    • How to Change the Header Size
    • How to Change the Background Color of the Genesis eNews Widgets
    • Font Size for Food Blogs
    • Why is troubleshooting so complex?
    • How to Launch Your Food Blog
    • Add a Before Entry Widget Area
    • Recipe Index: Content Configuration (Cravings Pro + Seasoned Pro)
    • How Do I Set Up My Navigation Menu?
    • Can I Use Multiple Recipe Index Pages?
    • How Do I Update the Theme Version? (without the Feast Plugin)
    • Remove Search Box from Navigation Menu
    • How to Add the Visual Category Page Index
    • Customization Library
    • Setup a secondary navigation menu
    • How to clear your cache
    • Troubleshoot Plugin Conflicts
    • How to Add the Featured Posts Category Index
    • Food Blog Home Page Pagination
    • Cravings Pro Theme: Setup Your Navigation Menu
    • Why we're not supporting Gutenberg Oversized Images
    • Install Theme, and Import Demo Content and Widgets
    • How to change change your footer
    • Seasoned Pro Classic Tutorials
    • Manually Disable Google Fonts
    • Image Alt Tags
    • Why we don't support the read more tag
    • Pinterest for Food Bloggers
    • How to Create Multiple Recipe Index Pages
    • WordPress Settings
    • Foodie Pro Classic Tutorials
    • Brunch Pro Classic Tutorials
    • Cook'd Pro Classic Tutorials
    • Cravings Pro Classic Tutorials
    • All About Featured Images
    • FAQ for All Themes
    • Add Google Analytics Tracking Code
    • Customization Referrals
    • Genesis Child Themes
    • Enable SSL for HTTPS on your Food Blog
    • How to Start a Food Blog
    • Set Up Your WooCommerce Shop
    • The parent theme could not be found. You will need to install the parent theme, genesis, before you can use this child theme
    • Food Blog Theme Features Comparison
    • Translation + Multi Language Support
    • Use Inspect Element to troubleshoot styles

    Free 5-Day Branding Design Challenge

    With this actionable 5-part challenge, you'll have just the digital design strategies you need for a profitable website... and best of all, it's free. Signup and get your first challenge delivered immediately!

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.