And don’t tell Christian that i can copy his circles :)

sorry – me as a participant too – i’m now out.

maybe the mods have an Answer for you – but se my comment above
If you google to “is it good practice to use iframe”

One more on that: the left shift of the icons is a bit tricky – this is in dependency to caption length.
If the length of the caption under the icon is to big the left position has to be corrected.

I tried to place the av-icon-char in an absolute way (only the circles with the icon) but than positioning of the caption is not possible.

or you give this a chance:

https://kriesi.at/support/topic/overlapping-shrinking-logo/

Please take the new code because i put it on math basis – declaration see here : link

by the way i noticed that safari does not support content: url()
so i would now prefer the background solution !

na immerhin habe ich auf Grund deiner Anfrage das nette Plugin gefunden, welches ich nun auch für größere Mengentexte verwende. Insbesondere wenn ich Blocksatz nutze.

Bingo ! See here on top : Link

4 or 6 Icon Circles : most is the same code-block has one less or one more circle.
And only Positioning of the icons is the work to do – all the rest is similar to 5 Icon Circle !

In the Code-Block you only have to complete Link, link-target and fill in you own Caption

• This reply was modified 8 years, 12 months ago by Guenni007.

The 5 Circle Case:

Some Positioning:

/* the circle itself border-radius has to be more than 50% of height and width */
.circle {
    border: 2px solid #059 !important;
    border-radius: 250px;
    display: block;
    height: 500px;
    overflow: visible;
    padding: 0 !important;
    width: 500px;
    position: relative;
    margin: 60px
}

/* if you like to have a background-image in the circle, with less opacity */
.circle::before {
    background-color: transparent;
    background-image: url("http://webers-testseite.de/ikom/wp-content/uploads/sh_284363741.jpg");
    border-radius: 250px;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
}

/* if you don't like to change the code itself you can set the icon size here */
.circle .av_font_icon .av-icon-char  {
    font-size: 50px !important;
    line-height: 50px !important;
    width: 50px !important;
}

/* this is the class from the code not the caption set by icon element and determines the position where the description is shown */
.circlecaption {
    position: relative;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* you see in that code that these are the single text elements of each Icon */
.circlecaption span {
    display: none;
    width: 250px; 
font-size: 16px;
text-align: center
}

/* this is the logo or image in the center - hover states must follow than */
.circlecaption img {
    display: block;
    width: 250px;
}

/* very nice gimmick - the tilde (swung dash) is a special selector - read yourself  */
/* it is called: General Sibling Combinator */
.circle .av_font_icon.circle1-5:hover ~ div.circlecaption span.circle1-5,
.circle .av_font_icon.circle2-5:hover ~ div.circlecaption span.circle2-5,
.circle .av_font_icon.circle3-5:hover ~ div.circlecaption span.circle3-5,
.circle .av_font_icon.circle4-5:hover ~ div.circlecaption span.circle4-5,
.circle .av_font_icon.circle5-5:hover ~ div.circlecaption span.circle5-5 {
display: block;
background: rgba(255,255,255,0.8);
padding: 5px;
border-radius: 5px
}

/* hover effects for the hovered links  */

.circle .av_font_icon.circle1-5:hover a {
background: #BF00FF;
color: #fff !important
}
.circle .av_font_icon.circle2-5:hover a {
background: #0080FF;
color: #fff !important
}
.circle .av_font_icon.circle3-5:hover a {
background: #00FF00;
color: #fff !important
}
.circle .av_font_icon.circle4-5:hover a {
background: #FFFF00;
color: #000 !important
}
.circle .av_font_icon.circle5-5:hover a  {
background: #FF0000;
color: #fff !important
}

/*  hovering the icons - let the logo in the circle disappear */
.circle .av_font_icon:hover ~ div.circlecaption .circlelogo {
display: none !important;
}

/* positioning of each icon in the uniform pentagon - so most positions are calculated and nearly not  influenced*/ 
/*  - by circle dimensions  - 50px is here  icon-font-size  -  but this is a lot trial and error  */

.circle .av_font_icon a , 
.circle .av_font_icon span {
    background-color: #fff;
}

.av_font_icon.circle1-5 {
    position: absolute;
    top: calc(0px - 55px);
    left: calc(0px + 195px);
}

.av_font_icon.circle2-5 {
    position: absolute;
    top: calc(0px + 118px);
    left: calc(0px + 433px);
}

.av_font_icon.circle3-5 {
    position: absolute;
    top: calc(0px + 397px);
    left: calc(0px + 342px)
}

.av_font_icon.circle4-5 {
    position: absolute;
    top: calc(0px + 397px);
    left: calc(0px + 48px);
}

.av_font_icon.circle5-5 {
    position: absolute;
    top: calc(0px + 118px);
    left: calc(0px - 55px);
}

here some code for responsive case:

@media only screen and (max-width: 720px) {

.circle .av_font_icon .av-icon-char  {
    font-size: 40px !important;
    line-height: 40px !important;
    width: 40px !important;
}

.circle .av_font_icon .av-icon-char {
    padding: 20px !important;
}

.circle {
    height: 350px;
    margin: 40px;
    overflow: visible;
    width: 350px;
    border-radius: 190px;
}

.av_font_icon.circle1-5 {
    position: absolute;
    top: calc(0px - 35px);
    left: calc(0px + 135px);
}

.av_font_icon.circle2-5 {
    position: absolute;
    top: calc(0px + 81px);
    left: calc(0px + 301px);
}

.av_font_icon.circle3-5 {
    position: absolute;
    top: calc(0px + 277px);
    left: calc(0px + 238px)
}

.av_font_icon.circle4-5 {
    position: absolute;
    top: calc(0px + 277px);
    left: calc(0px + 32px);
}

.av_font_icon.circle5-5 {
    position: absolute;
    top: calc(0px + 81px);
    left: calc(0px - 32px);
}
}

• This reply was modified 8 years, 12 months ago by Guenni007.

i do not see your site – so i can not help you –
i mentioned above that i have made this for my solution for ipad landscape. This depends on the logos and the logo width.

so play a bit with those values of logo width.
And a good advice is to make the images the same size on your graphic program.

• This reply was modified 8 years, 12 months ago by Guenni007.

and try this here first – i think browser-compatibility of vh and vw (screen-height and screen-width) is big enough !
this works better on small screens too !

.embed_iframe .avia_textblock p {
    position: relative;
    height: 0;
    padding-bottom: 65vh;
    overflow: hidden;
    width: 100%;
    height: auto
}

.embed_iframe iframe {
    height: 100%;
    left: 0;
    position: absolute !important;
    top: 0;
    width: 100%;
}

the thing is that this is not the correct url.

Try this :

<iframe src="http://www.novafriburgoacidadequequeremos.com.usrfiles.com/html/cee4aa_e5e645abd11a757393a6c5b9893d821b.html" width="100%" height="100%" scrolling="no"></iframe>

you can than use a little css trick to get a good height for you iframe.
(i did the ifram in a 1/1 – text container) the 1/1 i gave a custom class: embed_iframe

.embed_iframe .avia_textblock p {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    width: 100%;
    height: auto
}

.embed_iframe iframe {
    height: 100%;
    left: 0;
    position: absolute !important;
    top: 0;
    width: 100%;
}

see here: Link

• This reply was modified 8 years, 12 months ago by Guenni007.

on the third 1/3 cell there is no image inserted:

A background-image by default has no height!
The container height is determined by the content and the padding!
it is not determined by background!
accept – you declare a background-size

Link to Edit Cell Image

as you can see – if you don’t want to give that cell a custom css – and if you don’t want to have any other content in that cell – you can manage it by setting up top and bottom padding high!

The better way seems to be you give those cells (the first will be enough – because cells are displayed table-cell) a custom class
http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

and make for those cells a quick css rule
f.e.

.cellwithoutcontent { 
height: 40vh !important
}

• This reply was modified 8 years, 12 months ago by Guenni007.

@fusiontechnic : i did not see any background image in that section- i quess you removed it.

First of all there is a little mistake in that tutorial:

The code to substitute is this (without that last curly bracket !) because Enfold does not have here a curly bracket there !

$output .= "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
        $avia_theme_location = 'avia';
        $avia_menu_class = $avia_theme_location . '-menu';
        $args = array(
            'theme_location'    => $avia_theme_location,
            'menu_id'           => $avia_menu_class,
            'menu_class'        => 'menu av-main-nav',
            'container_class'   => $avia_menu_class.' av-main-nav-wrap'.$icon_beside,
            'fallback_cb'       => 'avia_fallback_menu',
            'echo'              =>   false,
            'walker'            => new avia_responsive_mega_menu()
        );
 
        $main_nav = wp_nav_menu($args);
        $output .= $main_nav;
         
       
    /*
    * Hook that can be used for plugins and theme extensions
    */
    ob_start();
    do_action('ava_inside_main_menu'); // todo: replace action with filter, might break user customizations
    $output .= ob_get_clean();
     
    if($icon_beside)
    {
        $output .= $icons;
    }
         
    $output .= '</nav>';
 
    /*
    * Hook that can be used for plugins and theme extensions
    */
    ob_start();
    do_action('ava_after_main_menu'); // todo: replace action with filter, might break user customizations
    $output .= ob_get_clean();

but the code you have to insert is ( with that last curly bracket !)
logic misleaded me first because i thought i had to make it from semicolon to semicolon

if( function_exists( 'ubermenu' ) ){
    $output.= ubermenu( 'main' , array( 'theme_location' => 'avia' , 'echo' => false ) );
}
else{
    $output .= "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
        $avia_theme_location = 'avia';
        $avia_menu_class = $avia_theme_location . '-menu';
        $args = array(
            'theme_location'    => $avia_theme_location,
            'menu_id'           => $avia_menu_class,
            'menu_class'        => 'menu av-main-nav',
            'container_class'   => $avia_menu_class.' av-main-nav-wrap'.$icon_beside,
            'fallback_cb'       => 'avia_fallback_menu',
            'echo'              =>   false,
            'walker'            => new avia_responsive_mega_menu()
        );
 
        $main_nav = wp_nav_menu($args);
        $output .= $main_nav;
         
       
    /*
    * Hook that can be used for plugins and theme extensions
    */
    ob_start();
    do_action('ava_inside_main_menu'); // todo: replace action with filter, might break user customizations
    $output .= ob_get_clean();
     
    if($icon_beside)
    {
        $output .= $icons;
    }
         
    $output .= '</nav>';
 
    /*
    * Hook that can be used for plugins and theme extensions
    */
    ob_start();
    do_action('ava_after_main_menu'); // todo: replace action with filter, might break user customizations
    $output .= ob_get_clean();
}

this last curly bracket closes the else clause.