Hey vrhgmt744p,

Thank you for the inquiry.

You can use the following css code to adjust the size of the icon inside the iconbox.

.iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child {
    height: 0.5em;
    width: 0.5em;
    top: -8px;
    position: relative;
}

#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
    line-height: 1.5em;
    display: block;
    top: 0;
    position: relative;
    font-size: 0.6em;
}

If you need this applied to specific icons, try adding a custom css class to the element. Please refer to the documentation below.

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hey icarogioiosi,

Thank you for the inquiry.

You can add this css code to move the title to the right of the image, position it at the top, reduce the font size, remove the borders, and add space below each portfolio entry. Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings, then purge the cache after adding the modification.

#top .isotope-item.special_av_fullwidth .inner-entry {
    text-align: left;
    display: flex;
    flex-direction: row-reverse;
}

#top .grid-entry .inner-entry {
    box-shadow: none;
}

#top .isotope-item.grid-entry {
    margin-bottom: 20px;
}

#top .isotope-item.special_av_fullwidth .av_table_col .entry-title {
    margin: 0 0 20px;
    font-size: 16px;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.phone-info .avia-icon-pos-left {
    float: none;
    display: inline;
}
.phone-info .avia-icon-pos-left .av-icon-char {
	font-size: 14px;
	line-height: 18px;
}
.phone-info .avia-icon-pos-left.av_font_icon.av-mds9wcyi-0057de6c5f2e63955f80107ffd4df8b8 {
	 margin-left: 10px;
}
#top .phone-info .avia-svg-icon.avia-font-svg_entypo-fontello svg:first-child {
    fill: #fff;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey vrhgmt744p,

Thank you for the inquiry.

You can enter these shortcodes in the phone info field.

Phone:

[av_font_icon icon='phone' font='svg_entypo-fontello' style='' caption='' size='40px' position='left' color='' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='av-mds9v1ky' sc_version='1.0' admin_preview_bg=''][/av_font_icon]

Email:

[av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' size='40px' position='left' color='' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' av_uid='av-mds9wcyi' sc_version='1.0' admin_preview_bg=''][/av_font_icon]

Let us know the result.

Best regards,
Ismael

Hey Tilman,

Thank you for the inquiry.

You can add the same html in the phone info field.

<div class="top-bar-content">
  <span class="content">
    <i class="fa rt-icon-placeholder2"></i> Süderquerweg 651 • 21037 Hamburg
  </span>
  <span class="content">
    <i class="fa rt-icon-telephone"></i>
    <a href="tel:+49407375020">+49 40 737 50 20</a>
  </span>
  <span class="content">
    <i class="fa rt-icon-3-time"></i> Mo. bis Fr. 7:15-18:00
  </span></div>

Then, add this css code to adjust the layout of the content:

.top-bar-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px; 
}

.top-bar-content .content {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px; 
}

.top-bar-content i {
  font-family: "FontAwesome";
  font-style: normal;
  font-size: 16px; 
  display: inline-block;
}

You may need to install the FontAwesome plugin to properly display the icons.

— https://wordpress.org/plugins/font-awesome/

Best regards,
Ismael

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

.phone-info a {
  font-size: 22px !important;
}

Best regards,
Rikard

Hey lelouxwebdesign,

This CSS is removing the underline:

#top .all_colors span[style*="underline;"] {
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none !important;
}

Maybe you have added it in Quick CSS?

Best regards,
Rikard

Hey Ivana,

Thank you for the inquiry.

Did you modify the H3 heading element in the Enfold > Advanced Styling panel? The blog and portfolio post titles inherit the styles from the advanced styling configuration. If you want to override it, you can try using this css code:

#top #wrap_all .all_colors h3.grid-entry-title, #top #wrap_all .all_colors h3.slide-entry-title.entry-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    display: block;
    margin-bottom: 0;
}

Make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings to ensure that the changes take effect.

Best regards,
Ismael

Hi,

You can set the font size by editing the Special Heading element containing the text “Hi, I’m Robert”. Look for the Styling > Font Sizes > Heading Font Size option, as shown in the screenshot below.

View post on imgur.com

For the screenshot, you can use platforms like Savvyify, Imgur or Dropbox.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,
If you want the font to be 200px and the menu items closer and to the left, try this CSS in your <strong style=’color:#000′>Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #av-burger-menu-ul {
    text-align: left;
    padding-left: 20px !important;
}
.html_av-overlay-full #av-burger-menu-ul li {
padding: 10px;
}
#top #wrap_all #av-burger-menu-ul li {
    font-size: 200px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thanks for the update.

Q: why does : Working With Us is Easy not look the same size?

The font size of both headings is the same —- 28px.

View post on imgur.com

You can apply the same font size to the “Hi, I’m Robert” heading, remove the 30px padding, and delete the horizontal separator element after it to reduce the space between the heading and the text below.

Best regards,
Ismael

Hi,

Try to edit the Contact Form element and set the Styling > Form Color Scheme to Dark Transparent. You can also replace the previous css with this:

#top #wrap_all .main_color .button, .main_color #submit, #top #wrap_all .contact-form :is([type=submit], button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

Best regards,
Ismael

Hi,

Please remove the previous modification and replace it with the following css code, then make sure to purge the cache or clear your browser history afterward.

#top #wrap_all .contact-form :is([type=submit], button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

Best regards,
Ismael