CSS Styling

Support
#1

Hi,

I have one problem with my custom CSS.

I added some extra styling for my scrolling offset. For eample: https://one-million-places.com/reiseberichte/usa/ketchikan#prepaid-sim-karte-fuer-die-usa
The scrolling offset has has the right postion that the text is not under the menu bar.

I did this with the extra CSS code:

.ez-toc-section {
padding-top: 70px;
margin-top: -70px;}

This extra code now overlays the font of the previous paragraph. Please see the purple part in my screen. The problem is, that you can´t click on the “Amazon” link in the last paragarph.

Is there a way to fix this with CSS?

Michael

#2

Hello Michael,

Thanks for writing in!

Instead of having this in your headline shortcode:

[custom_headline type="left" level="h2" looks_like="h3"]<span class="ez-toc-section" id="alle-reiseberichte-unserer-alaska-kreuzfahrt"><span>Alle Reiseberichte unserer Alaska-Kreuzfahrt</span></span>[/custom_headline]

Please make use of this shortcode:


[custom_headline type="left" level="h2" looks_like="h3" class="ez-toc-section" id="alle-reiseberichte-unserer-alaska-kreuzfahrt"]Alle Reiseberichte unserer Alaska-Kreuzfahrt[/custom_headline]

You may edit the rest of your custom headline element as well.

#3

Hi,

the shortcode I use in my posts is without the <span>:
[x_custom_headline type=“left” level=“h2” looks_like=“h3”]Die Hafeninfo von Princess Cruises über Juneau[/x_custom_headline]

I think the is coming from the Table of Contens plugin.

My question is: how can I get the ez-toc-section in the background that my link is clickable?

#4

Hey @michaelxxx,

If that is the case, to make your link clickable again, please remove the css:

.ez-toc-section {
  padding-top: 70px;
  margin-top: -70px;
}

If you need some spacing in between, you can apply it to the headline element instead. You may use our element spacing utility class like this:

 [x_custom_headline type="left" level="h2" looks_like="h3" class="mtm"]Die Hafeninfo von Princess Cruises über Juneau[/x_custom_headline]

Noticed that I added class="mtm" where “mtm” means margin top medium. You can check out these articles to know more about element spacing.

Hope this helps.

#5

I got it. A simple “display: block;” is the solution :slight_smile:

#6

Hey Michael,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.