Images run over tabcontent

  • Resolved Lizardeye

    (@lizardeye)


    10 years, 8 months ago

    Hi,

    I already looked for a solution, but found nothing. (Or maybe I′m blind.)

    I′m using Tabby in many projects ′cause it′s a great and simple plugin.
    But I registrated an annoying problem with images and the tabcontent.

    If there isn′t enough text beside the image, it runs over the content of the tab.

    Here you can see my problem at the second tab.

    I have no idea to fix it and it kills the complete design, so I hope that you can help me.

    Kind regards, Liz

    https://www.ads-software.com/plugins/tabby-responsive-tabs/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author cubecolour

    (@numeeja)

    Try the following CSS rule to solve the collapsing border issue:

    .responsive-tabs .responsive-tabs__panel {
	float: left;
}

    Also, athough you don’t mention this other issue, the gap below each tab is due to the height of the text in the tabs. To solve this try adding a rule to change the padding-bottom for each tab:

    .responsive-tabs .responsive-tabs__list__item {
	padding-bottom: 26px;
}

    The plugin documentation contains instructions for using custom CSS to replace the default tabby CSS.

    Thread Starter Lizardeye

    (@lizardeye)

    Perfect! That fixed it. Thank you for the fast answer!

    .responsive-tabs .responsive-tabs__panel {
	float: left;
}

    I had to add the following to the above css.

    width: 100%;
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Images run over tabcontent’ is closed to new replies.