Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • January 15, 2019 at 8:55 pm #1054341
    Hudavi

    How would I go about making the tab section images larger – The circles at the top in the tab. I would also like to make the circles more spaced out? I would like them around 150 px. Right now the icons and text is also too close together. I would like theme spaced out better as well if possible. I have 2 section on the page below with the tab sections that need to be changed.

    January 15, 2019 at 9:02 pm #1054352
    Victoria

    Hey Hudavi,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width:1024px){
     .av-tab-section-image {
        width: 130px;
        height: 130px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 15, 2019 at 9:25 pm #1054368
    Hudavi

    Wow, thanks for the fast reply. The pictures looks good but the spacing is still tight and not centered.

    January 17, 2019 at 9:42 pm #1055169
    Victoria

    Hi Hudavi,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.av-tab-with-image .av-inner-tab-title {
    display: block;
    margin: 0 auto;
}
#top .av-section-tab-title {
    margin: 0px 25px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 18, 2019 at 12:34 am #1055274
    Hudavi

    Thank @victoria That somewhat worked but not quite how I envisioned things. I was hoping the text line would also not break so fast. For Example “DR. CHARLOTTE SARSHAD” would be one line. I added a BR element after that so the D.O would go on the next line. The second Tab Section on that page is now not in one line but two. Any chance to get it all on one?

    January 21, 2019 at 2:07 pm #1056645
    Victoria

    Hi Hudavi,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.av-inner-tab-title {
    width: auto;
    max-width: 150px;

}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 22, 2019 at 1:16 am #1056959
    Hudavi

    Thanks, that worked but the second tab section is still on 2 rows. Mobile view also looks really spaced out. Is there a way to fix that?

    January 22, 2019 at 2:43 pm #1057223
    Victoria

    Hi Hudavi,

    Ok, change the last code to:

    
@media only screen and (min-width:1024px) {
    .av-inner-tab-title {
        width: auto;
        max-width: 150px;
    }
}

    Best regards,
    Victoria

    January 23, 2019 at 12:02 am #1057503
    Hudavi

    That helps but I’m still having the double rows in the section element.

    January 23, 2019 at 5:56 pm #1057839
    Victoria

    Hi Hudavi,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    January 23, 2019 at 8:08 pm #1057919
    Hudavi

    Screenshot attached on how the second tab element section has two rows of people. I need everyone on one row.

    January 24, 2019 at 5:02 pm #1058223
    Victoria

    Hi Hudavi,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    January 24, 2019 at 9:34 pm #1058348
    Hudavi

    Here you go! I provided that in the private section.

    January 28, 2019 at 4:45 am #1059504
    Ismael

    Hi,

    You have to remove the margin between the tab section title and decrease the image. Remove this css code:

    #top .av-section-tab-title {
    margin: 0px 25px;
}

    And then adjust the size of the image:

    .av-tab-section-image {
    width: 90px;
    height: 90px;
    margin: 0 auto;
}

    Best regards,
    Ismael

    January 28, 2019 at 8:45 pm #1059790
    Hudavi

    Thanks @ismael That works!

    January 30, 2019 at 9:43 am #1060395
    Ismael

    Hi,

    Great! Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Tab Section Icon image larger and more spaced out’ is closed to new replies.