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 9 years, 6 months ago by Guenni007.

ok – i see you did it in a code block – that is ok too
the code you need is then:

.page-id-740 .avia_codeblock {
    height: auto;
    padding-bottom: 65vh;
    position: relative;
    width: 100%;
}

.page-id-740 .avia_codeblock iframe {
    height: 100% !important;
    left: 0;
    position: absolute;
    top: 0;
    width: 100% !important;
}

i did it site-specific because i don’t know if you have elsewhere some iframes

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%;
}