Something on your site looks wrong. Not broken in a way that produced an error message. Not a page that won’t load. Just visually, obviously wrong, and you can’t figure out why. A color that should be one thing is another. Text that should be centered isn’t. A section that should be visible is missing, or crowded, or squished in a way that doesn’t make sense given anything you can see in the page editor.
That’s what Loupely Lens is for.
Loupely Lens is a Chrome extension that works on any website. You click on the element that looks wrong, pick the property that’s causing the problem, tell Lens what you want it to be, and it shows you exactly what CSS rule is winning on that property and why your intended value isn’t taking effect. Then it gives you a specific next step: an override you can paste in, or a handoff package for your developer.
Why this is hard without Lens #
The browser already knows exactly why the element looks the way it does. The complete answer is in there. But it’s buried in DevTools under dozens of properties, cascade rules, and origin data that takes real CSS knowledge to read. Most people open DevTools, see the wall of information, and close it again. Lens reads the same information and hands you what matters.
Works on any website #
Lens isn’t limited to WordPress. It works on any website open in Chrome. You don’t need a plugin installed anywhere. Just the extension, a plan or free trial, and the element you’re staring at.
What Lens doesn’t do #
Lens doesn’t fix anything automatically. It tells you what’s causing the problem and what to do about it. It doesn’t modify your site, write CSS to your stylesheet, or touch any file. The override it generates is something you paste in yourself.