Major layout problem with shortcodes

[Alexander]

When using shortcodes on any page on my website the layout of the calendar gets jumbled. Right now I’m using [tribe_mini_calendar] as shortcode on my frontpage “www.hafsten.se/wp” and the calendar just looks horrible. What is the problem here?

[George]

Hey Alexander,

Thanks for reaching out.

Your theme is what dictates most of the front-end styles of anything on your site, so your theme is a huge part of these issues.

However, can you please check out the edit screen for this page? View editor in Text mode, not Visual mode, and ensure that the shortcode looks something like this:

[tribe_mini_calendar]

And NOT anything like this:

<pre>[tribe_mini_calendar]</pre>

☝️ Do you find any such tags like this in your edit screen? If so, once you remove them and save the changes, how do things look?

Thanks,
George

[Alexander]

Yes, this was in fact the issue! There where pre tags before the shortcode in the text editor. I have removed them and now the calendar looks good. How did these pre tags get there?

Thanks for the help!

• This reply was modified 9 years, 6 months ago by Alexander.

[George]

Glad to hear it, Alexander!

As for how the tags got there in the first place, I admit that I am not quite sure. This is often a problem if you copy-and-paste the shortcodes from a location, so that might be relevant to your issues.

In any case, I hope this tips helps with shortcodes going forward, and I wish you the best of luck with your project!

Open a new thread any time if other issues or questions arise.

Sincerely,
George

[Author]

Posts