Every WordPress theme is coded differently and you might run into some conflicts with Lasso Displays.

We do our best to completely isolate our classes. Every one of our CSS classes for Displays starts with lasso-. This ensures our Display CSS won't conflict with your theme CSS. And a lot of common styles end with !important to override basic global theme settings. But we can't know about them all.

So your theme CSS might conflict with Lasso CSS. And for the rest of this article, I'm making the assumption that you're new to coding with CSS.

First, you want to make sure the cache is fully cleared on your site and browser. This solves like 99% of display issues you might be seeing.

Why Theme CSS Conflicts Occurs

The main reason this happens is because your theme is adding styles to general class names.

There are 3 common ways to style the same element. Let's first take a look at the HTML for a standard link. This seems to be the most common.

<a href="http://www.example.com" target="_blank" class="article-link" id="example-link">

This link contains a bunch of attributes including:

href
target
class
id

In CSS, you can create a class name based on "class" and "id." But you can also add style to ALL links in your theme by creating a class simply named "a." So let's take a look at 3 ways you can style this link.

/* CHANGES THE TEXT LINK COLOR TO BLACK */

a{color: #000000;}

.article-link{color: #000000;}

#example-link{color: #000000;}

All of these classes do the same thing. But the first one will do it to all links because it's reference the actual HTML tag of <a>.

When you add a "." at the beginning of a class name, you're referencing the attribute "class." And when you add a "#" sign, you're referencing the ID.

So conflicts typically occur because you have styles applied across a lot of elements using the HTML tag name instead of a specific class or id. Or you have the same class or id names. This is next to impossible unless you have class names in your theme that start with .lasso-. Hence the reason we do that.

How to Avoid CSS Conflicts

The best way to do this is to remove styles from global HTML tags in your theme. Or if you don't control your theme code, ask your developer to do this. They should be referencing classes or ids. This solves a lot of CSS problems that crop up.

But you can also fix this by writing custom CSS code in Lasso Display Settings and adding the !important style.