Image appears outside tab

Hey Olly,

Sorry, I never received an email for this support request – sorry for the delay.

I can see that the gallery is set with a height of 0px. This is set on the fly by the plugin, but I’ve never seen a gallery with images to show be set to 0px.

One quick fix you could do is to set a minimum page height for your site using CSS – e.g.

.su-tabs-pane {
     min-height: 500px;
}

However, this is just a workaround.

What shortcode are you using?

Cheers

Hi,

Thanks for the support. No need to apologise, I’ve noticed an odd thing when I post on the support forums – lately it never shows up as me starting a new thread, just replying to a thread! Annoying.

Anyway, your CSS worked a charm, thank you.

Here is the shortcode I’m using on that page:

[su_tabs]
[su_tab title="<strong>Introduction</strong>"]

[su_column size="3/4"]
<img class=" size-medium wp-image-125 alignleft" src="https://heavenly.globexposure.net/wp-content/uploads/2015/08/St-Stephens-300x262.jpg" alt="St Stephens Norwich" width="300" height="262" />

If you want to find out more about the actual church, its contents and history visit the website of Norwich Historic Churches Trust:
<a href="https://www.norwich-churches.org/St%20Stephens/home.shtm">www.norwich-churches.org</a>

- You can also read Nicholas Groves’ book:
The Medieval Churches of the City of Norwich (ISBN 978-0-9560385-2-4), available in local bookshops and public libraries.
[/su_column]
<img class="alignleft wp-image-558 size-medium" src="https://heavenly.globexposure.net/wp-content/uploads/2015/08/Nicholas-Groves-207x300.jpg" alt="Nicholas Groves" width="207" height="300" />

&nbsp;

&nbsp;

[/su_tab]
[su_tab title="<strong>News</strong>"]
[cactus-masonry post_tag_slug="st-stephen"]
[/su_tab]
[su_tab title="<strong>Map</strong>"]

[mapsmarker marker="31"]

[/su_tab]
[su_tab title="<strong>History</strong>"]

<a href="https://www.norwich-churches.org/St%20Stephens/home.shtm" target="_blank">St Stephens - Norwich Historic Churches Trust</a>

<a href="https://www.norfolkchurches.co.uk/norwichstephen/norwichstephen.htm" target="_blank">St Stephens - Norfolk Churches</a>

<a href="https://www.heritage.norfolk.gov.uk/record-details?MNF598" target="_blank">St Stephens - Heritage Norfolk</a>

<a href="https://www.norfolkstainedglass.co.uk/St_Stephen/home.shtm" target="_blank">St Stephens - Norfolk Stained Glass</a>

[/su_tab]
[/su_tabs]

Maybe you can see something else amiss here?

Many thanks

Hey again daniish,

Wow. Maybe its an issue with your account, because I’m not getting any follow up messages from you. Other users, sure, but not you for some reason. I feel rude – sorry again.

And hey, I’m glad the CSS worked for you!

I don’t see any JS errors on your page (but I do see some debug information left over by the author of jQuery Cycle2 ?? ). That’s not a problem, it normally gets removed so other developers don’t see it.

Look, your masonry shortcode looks fine – but it’s difficult to set it up to suit your page layout when you only have one image.

I would eventually set the image size to be larger and perhaps give it a percentage width. Currently your images are cropped to a small size – as you can see. The issue there is WordPress’ default thumbnail size.

There are two options there:

1. You can set the quality to a higher value in the shortcode by using the quality parameter. See this page for more info.
2. Or, you can set the thumbnail size to something a little more realistic. This change will be site-wide though. You can do this in your WordPress setup. Check out what’s written under the title headed Why are all of my images cropped to the same size & dimensions??? on the FAQ page for some instructions on fixing this.

Also, try out the Shortcode Generator to play around with some basic styles. But that can really wait for when you have more images to display. It’s hard to design for that which you cannot yet see.

And of course, if you do get stuck, get in touch and I’ll try to help. If I don’t get back to you, I’m either dead or not getting email alerts from you. You can always try to get in touch via the FAQ page. I should get an email if you submit an inquiry there.

Cheers again