Hi everyone,

I need some urgent help over a custom code that I got for my-account.php template for WooCommerce based website.

The bottom problem, is on the display (CSS) os the content, all the PHP goes fine and calls what needs to be called, all-though I don’t know if I made the mistake on the HTML or the CSS code.

Here are some screen of different versions of the issue (obtained manipulating the CSS code when I tried to fix the issue without result.)

The CSS code I’ve been fighting on is this part:

.tab-content{

z-index: 2;
display: none;

text-align: left;
width: 100%;
line-height: 140%;
padding-top: 10px;
padding: 15px;
left: 0;
box-sizing: border-box;

position: fixed;

   -webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
   animation-duration: 0.5s;

}

Changing the “Position” property I got several changes on the display but none of the get it working.

Here are the screen for the following combinations:

position: fixed;
http://breatel.com/fixed.png

position: absolute;
http://breatel.com/absolute.png

position: absolute;
http://breatel.com/none.png

On the last one you can see all that is supposed to show on the tabs, but they are not arranged properly like on the absolute and fixed versions, the thing is that the content on the absolute version does not show it displays only the tabs and the fixed shows the tabs aligned but the content goes out of the container.

What I want:

Display the tabs aligned properly like on the absolute and fixed images but the content displayed on its place.

Again you can see on the NONE.PNG that the content is loaded complete.

Here you can see the Complete PHP template and the Complete CSS used for the template:

https://www.breatel.com/main.txt

https://www.breatel.com/my-account.txt

Thanks for the assistance.

Much appreciated.