Tabs content not showing in standard Cornerstone but showing in skeleton mode

[tdspezia]

Hi guys,

I was uploading new images onto Tabs for the following page and I got a bug…NO idea what happened.
https://www.betterthancoffee.com/products/
The footer is now showing on the side of the page not at the bottom, like if there were several columns.
You can see from the webpage, the layout is ‘all over the place’ (for the lack of better words)

The Tabs element still shows in Cornerstone but with no content (when selected it shows nothing on the right)…BUT is shows in the Skeleton Mode…

How should I proceed to fix this?
And more than that, do you have any idea what could have happened (to avoid this in the future)?

Thank you

Valerie

[ruenel]

Hello There,

Thanks for posting in!

You are experiencing this issue because you have inserted an html code with unclosed <div> tag.
You have added this:

<div class="main-boxtabs">
	<div class="left-imgbox">
		<div class="image-box"><img src="http://www.betterthancoffee.com/wp-content/uploads/2018/09/BOX-BACK-Better-Than-Coffee-Mint-Transparent-500px.png" alt="" width="300" height="300" class="alignnone size-medium wp-image-5648" />

		<br />
		<a href="http://www.betterthancoffee.com/wp-content/uploads/2018/09/product-imgabc-1.png"><img src="http://www.betterthancoffee.com/wp-content/uploads/2018/09/Icons_One-line-Black-Transparent-First-4-icons.png" alt="" width="300" height="87" class="alignnone size-medium wp-image-5694" /></a><br />
		<a href="http://www.betterthancoffee.com/wp-content/uploads/2018/09/product-imgabc-2.png"><img src="http://www.betterthancoffee.com/wp-content/uploads/2018/09/Icons_One-line-Black-Transparent-Last-4-icons.png" alt="" width="300" height="87" class="alignnone size-medium wp-image-5696" /></a></div>
	</div>
<div class="teabs-right-textbox">
<br />
</div>
</div>
<div class="teabs-right-textbox">
<h2>DARK CHOCOLATE &amp; MINT</h2>
<p><span>Our hallmark 70% dark chocolate with a minty twist that lingers on the tongue.</span></p>

</div>
</div>
<div class="bottom-buttonbox"><a href="https://shop.betterthancoffee.com/" class="shopnow-tabbtn">Shop now</a></div>

Please indent the code and made sure that it is valid, correct and every <div> tag is closed properly.

Kindly let us know how it goes.

[tdspezia]

Thank you @RuelNel
I have added a couple of dividers, it worked.

HOWEVER - I had to do this in the sketelon mode…
this tabs section still doesn’t show in Cornestone (right panel).
I would like to fix this as it is not practical to go in skeleton mode all the time.

How do I do this?
Thank you for your help

Valerie

[rad]

Hi @tdspezia,

The error is still the same, without closing </div>.

I went ahead and fixed them. It should be viewable in the builder now.

Thanks!

[tdspezia]

Hi @Rad
Thank you I see the tabs in the builder BUT you changed something and the design is actually messed up …
It looks like the tab numbers have changed
The Dark Chocolate Coconut tab is the first tab and should be a blue tab…
I went into the custom CSS and changed the # of the tab from 16,17,18,19 to 15,16,17 and 18
That changed the color of the tabs themselves.
BUT the colors of the panels is not correct.
As you can see right now:
First tab panel is white (should be blue),
2nd tab is blue (should be orange)
etc…

I have the piece of code below to add to the CSS but i am under the impression it is somewhere else and I cannot see it - can you please delete it for me as I do not want to create an extra conflict by adding this to the custom css?
Thank you

div#panel-15 {}

#tab-15,
#panel-15 {
background-color: rgb(7,197,243);
}

#tab-16,
#panel-16 {
background-color: #ff5000;
}

#tab-17,
#panel-17 {
background-color: #e11383;
}

#tab-18,
#panel-18 {
background-color: #00c18b;
}

[tdspezia]

still need to be fixed as the tab moved numbers

i have added the custom CSS to tab 15 (which was created by @rad somehow but I do not know how to edit the CSS to modify the tab 16 to 18 colors

#tab-15,
#panel-15 {
background-color: rgb(7,197,243);

THANK YOU for helping.

[paul.r]

Hi,

Please replace this code

div.e505-15 .x-tabs-panel#panel-16 {
    background: rgb(7,197,243);
}

div.e505-15 .x-tabs-panel#panel-17 {
    background: rgba(255,80,0,1 );
}

div.e505-15 .x-tabs-panel#panel-18 {
    background: #e11383;
}

div.e505-15 .x-tabs-panel#panel-19 {
    background: #00c18b;
}

with this

#tab-15, #panel-15 {
        background-color: rgb(7,197,243);
}

#tab-16, #panel-16 {        
       background-color: #ff5000;
}

#tab-17, #panel-17 {
        background-color: #e11383;
}

#tab-18, #panel-18 {
        background-color: #00c18b;
}

I’ll list below some CSS/HTML resources that should help you to carry on these modifications on your own in the future:

Hope that helps

[tdspezia]

thank you

[Prasant]

You are most welcome.