Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 19, 2017 at 7:00 pm #809904
    klauseta

    Hi,
    I’m setting up new Tab section, but it looks that the icons are aligned left and the spaces between the tabs/titles are different in the frontend.
    I’m not able to center the icons above title (I have increased title size and block width).

    With the following code which I´ve found here in the support area I´ve solved the same problem with the image alignment.
    .av-section-tab-title.av-tab-no-icon.av-tab-with-image.noHover img {
    margin: 0 auto;
    }
    But now the arrow isn´t centered under the title and image of the tab

    Can you please help me for solving this problem and also for the tab section with icons.

    Thank you so much.

    • This topic was modified 7 years, 6 months ago by klauseta.
    June 19, 2017 at 8:49 pm #809956
    Jordan Shannon

    Hey klauseta,

    Please provide a link to the site/page in question so we can look into this further.

    Best regards,
    Jordan Shannon

    June 20, 2017 at 6:09 am #810161
    klauseta

    Hey Jordanien,

    here is the link to the site with the tab sections: http://www.echtleichtsinnig.org/fuer-organisationen/
    I don´t know, but it looks for me like the alignment problem is on every type of the Tab Section (icon, image, coloured).
    Perhaps I´ve done something wrong about the settings?

    Best regards
    Klaus

    • This reply was modified 7 years, 6 months ago by klauseta.
    June 20, 2017 at 4:52 pm #810483
    Jordan Shannon

    Hi,

    I added the following to quick css and it seems to have worked:

    .avia-builder-el-34  .av-inner-tab-title, .avia-builder-el-34 .av-tab-section-icon,  .avia-builder-el-34 .av-tab-arrow-container, .avia-builder-el-34 .av-tab-section-image{
	width:inherit!important;
}

    Best regards,
    Jordan Shannon

    June 20, 2017 at 6:47 pm #810583
    klauseta

    Hi,
    thank you so much. That´s basically the good looking effect I´ve wanted.
    But now I´ve tried to make changes and the whole styling is broken into the look before.
    Also when I start a complete new Tab Section.
    It seems to be like the Quick CSS Code doesn´t work, when I make changes or start complete new Tab Sections.
    Can you please have a look one more time. I´ll be so thankful, when you can solve this problem. So that it´s stable and works constantly, when I´m using this beautiful feature.
    Best Regards
    Klaus

    June 20, 2017 at 6:53 pm #810589
    Jordan Shannon

    Hi,

    Try removing all references to .avia-builder-el-34 in the css that I gave you. That code I gave you was for only that tab section. If you have multiple then it needs to apply to them all.

    Best regards,
    Jordan Shannon

    June 21, 2017 at 3:33 pm #811001
    klauseta

    Hi,

    I´ve done it and it generally seems to work. That´s great.
    But:
    Only the Tab Section, when I´m using images doesn´t work correctly now.
    The output of the images is the original image size so that the layout of the Tab Section is broken…
    Please have a look here: http://www.echtleichtsinnig.org/problem-ts/
    The Code I´ve put in Quick CSS is the follwing (I hope that´s the Code you´ve meant in your last message?):
    .av-inner-tab-title, .av-tab-section-icon, .av-tab-arrow-container, .av-tab-section-image{
    width:inherit!important;
    }

    Also I need help for this next point:
    When I want to write posts than there is (actually) no option for chossing post formats (link’, ‘quote’, ‘gallery’,’video’,’image’,’audio’), but I think it was so before and should be. Can you please help me for this too, so that I can use that options. Thank you so much.

    Best regards,
    Klaus

    June 21, 2017 at 3:52 pm #811005
    Jordan Shannon

    Hi,

    I will look into the tab issue, but please start a new thread for the second one as we want to keep this one focused on the original issue.

    Best regards,
    Jordan Shannon

    June 23, 2017 at 8:25 pm #812305
    klauseta

    Hi,

    I only want to remember that I still need help for the tab section with images (thread # 811001)
    This Tab Section, when I´m using images doesn´t work correctly now.
    The output of the images is the original image size so that the layout of the Tab Section is broken…
    Can you please have a look there: http://www.echtleichtsinnig.org/problem-ts/

    The Code I´ve put in Quick CSS is the follwing (I hope that´s the Code you´ve meant in your last message?):
    .av-inner-tab-title, .av-tab-section-icon, .av-tab-arrow-container, .av-tab-section-image{
    width:inherit!important;
    }
    This code seems to work for the other tab sections in a good way.

    Thank you so much-
    Best regards
    Klaus

    June 23, 2017 at 10:29 pm #812322
    Jordan Shannon

    Hi,

    You need to use the following:

    <pre><code>.avia-builder-el-34 .av-inner-tab-title, .avia-builder-el-34 .av-tab-section-icon,  .avia-builder-el-34 .av-tab-arrow-container, .avia-builder-el-34 .av-tab-section-image{
	width:inherit!important;
}

    This keeps focuses on the specific problem section.

    Best regards,
    Jordan Shannon

    June 1, 2020 at 5:54 pm #1218483
    arch2030

    Hi all,

    I’m running into a similar issue, and the code provided didn’t change anything. When using an image instead of an icon with the tabs, the image is left justified where as the tab text is center justified. How do you center justify the image or icon?

    Best,
    Lindsay

    June 2, 2020 at 12:45 am #1218588
    Jordan Shannon

    Hey arch2030,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    June 18, 2020 at 12:04 am #1223525
    arch2030

    Hi Jordan,

    Sure thing – I’ll put the link and a password to view the content below. It hasn’t been published yet. Essentially, I want the images and the tab titles to be vertically aligned.

    Best,
    Lindsay

    • This reply was modified 4 years, 6 months ago by arch2030.
    June 24, 2020 at 11:27 am #1225127
    Yigit

    Hi Lindsay,

    Sorry for the late reply!

    Please add following code to Quick CSS in Enfold theme options > General Styling

    .av-tab-section-image {
    margin: auto;
}

    Best regards,
    Yigit

    June 24, 2020 at 5:21 pm #1225286
    arch2030

    That worked, thank you!

    June 24, 2020 at 5:25 pm #1225288
    Yigit

    Hi,


    @arch2030     You are welcome! If you have any other questions or issues, please feel free to start new threads under Enfold sub forum :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Tab Section ICON Alignment’ is closed to new replies.