Space after title

have you searched the forum on spacing issues?
this is a common issue that has been addressed a number of times.

Hi Baden,
I searched the forum, but didn’t find a solution. I do not want to replace “span” with “div” in the settings, as this would make the whole line of my title colored, instead of only the background of the words.
I also tried putting a <div> before and a </div> after the [expand], but that didn’t work either.
Here’s one of the websites where you can see what I mean:
https://www.travelintense.com/eco-travel-destinations/costa-rica/eco-lodges-in-costa-rica/#samasati. As you can see, there is not enough space between the “exclusive offer” bar (C-O-M) and the following paragraph “From its unique…”
Thanks a lot for any advise,
Michaela

OK, so it seems you have a trigclass you are using called ‘heading’.
You will want to remove the HTML strong tag from the title attribute and add that to your .heading class. You can do this wherever you defined .heading. If you did not define this class you can add it to the Custom CSS section of the plugin under Dashboard > Settings > Collapse-O-Matic > Custom CSS, like so:

.heading {
   font-weight: bold;
   margin-bottom: 10px;
}

Thanks Baden,
I added the code to my CSS in the settings section, so now it looks like this

.heading {
color: #ffffff;
font-weight: bold;
background-color: #990C58;
padding-top: 10px;
padding-right: 10px;
margin-top: 50px;
margin-bottom: 50px;
}

I then removed the attribute from one page to try it out. Here’s the result:
https://travelintense.com/eco-travel-destinations/sri-lanka/eco-lodges-in-sri-lanka/
The space after the title is now a little wider, but definitely not the 50px that I input in the CSS.
Also, if you compare it to the other page I indicated in my previous comment (where I haven’t taken off the <strong> tag yet), you can see that suddenly the space BEFORE the title is less.
A really weird thing. Any idea how to fix this?

Hi Baden,
any news on my issue?
Thanks a lot for your help,
Michaela

if the css is not working it means it’s being overwritten by some other css.
try adding the !important tag like so:

.heading {
   color: #ffffff;
   font-weight: bold;
   background-color: #990C58;
   padding-top: 10px;
   padding-right: 10px;
   margin-top: 50px !important;
   margin-bottom: 50px !important;
}

You could also create your own class and assign it using the trigclass attribute:

[expand title="trigger text" trigclass="your_own_class"]...[/expand]

and the css:

.your_own_class {
   margin-top: 50px;
   margin-bottom: 50px;
}

But these issues are more CSS related than plugin support.
You can learn more about CSS from many online resources.

Hi Baden,
Thanks for trying to help. Don’t worry, I’m not a CSS newby and know how it works. However, I’m still having trouble with your plugin and the suggested CSS doesn’t work. Neither the one where I use “!important”, nor the one with the trigclass attribute. Don’t know how to fix this issue. Any other idea?
Cheers,
Michaela

the html for the trigger that is being output is:

<span class="collapseomatic expand-eco-lodge-promotion colomat-close colomat-visited" id="id5996" tabindex="" title="<strong>Exclusive 5% discount code available for our readers - click here!</strong>"><strong>Exclusive 5% discount code available for our readers - click here!</strong></span>

I’d like to have more space after the Collapse-O-Matic title (trigger)

Since you are using an inline element (span) element would would need to add display:block; but then you might as well use a div. The issue is how you want to use HTML and CSS, not with the plugin.
https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element