Hi,

Thank you for the info.

We edited the contact page and set the Styling > Font Sizes > Caption Title Font Size to 18px for mobile devices. The default custom size is 60px. You can also adjust the size for desktop and tablet in portrait/landscape modes. The font size should respond automatically if the Font Size default is set to the initial option, but since it’s set to a custom size (60px), you have to manually define the font size for all screen sizes. Please check the screenshot in the private field.

Best regards,
Ismael

Hi,
Your screenshot looks like the socket is full width, but your site is smaller, so I recommend making the area full width and making the font smaller so there is enough room.

.responsive #socket > .container {
    max-width: 100%;
    font-size: 18px;
}
#socket .copyright {
    float: right;
    padding-left: 20px;
    line-height: 24px;
}

and then move the “title” on the right side over some in the css for it, currently you have:

#footer-title {
    font-size: 38px;
    font-family: zen-kaku-gothic-new;
    color: #000;
    font-weight: bold;
    float: right;
    top: -38px;
    position: relative;
    left: -15%;
}

change to:

#footer-title {
    font-size: 38px;
    font-family: zen-kaku-gothic-new;
    color: #000;
    font-weight: bold;
    float: right;
    top: -38px;
    position: relative;
    left: -5%;
}

Best regards,
Mike

Hey reqonsult,
Thank you for the link to your site, this is because the first paragraph is in the “td” and the others are in a “p” which has more specialty.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .all_colors td p {
    font-size: 13px;
    font-weight: 400;
}

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

Best regards,
Mike

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

#header_meta.av_extra_header_active > .container {
  display: flex;     
  justify-content: center;
}
.phone-info {
	font-size: 14px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey lauragrashoff,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field and adjust the font sizes to suit:

#top.single-post #wrap_all #main .container_wrap_first h1 {
	font-size: 60px;
}
#top.single-post #wrap_all #main .container_wrap_first h2 {
	font-size: 30px;
}
#top.single-post #wrap_all #main .container_wrap_first p {
	font-size: 20px;
}

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

Best regards,
Mike

Hi,

Thank you for the inquiry.

Have you tried adjusting the font sizes of the captions in the Styling > Font Sizes panel for each slide? It’s possible to set the font size for different screen sizes.

Best regards,
Ismael

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

#footer-title {
font-size: 38px;
font-weight: bold;
font-family: arial;
color: #222;
float: right;
top: -38px;
position: relative;
left: -10%;
}

Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    var titleText = document.querySelector("h1.av-special-heading-tag").textContent;
    var footerTitleDiv = document.createElement("div");
    footerTitleDiv.id = "footer-title";
    footerTitleDiv.textContent = titleText;
    document.getElementById("socket").appendChild(footerTitleDiv);
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

This is the expected result:

Best regards,
Mike

Hi,

And how do i adjust the css?
I mean: it says: your css here…; how and where do i place the font name ( and size ) and the color?

To adjust the style of the link, you can use this css code in the Enfold > General Styling > Quick CSS field:

.go-back-link {
   color: red;
   font-size: 16px;
   font-family: 'Calibri', sans-serif;
}

Best regards,
Ismael

Hey lelouxwebdesign,
In your sidebar add a Custom HTML widget with this code:
<a href="javascript:history.back()">Go Back</a>

then in the post sidebar you will see a “Go Back” link

you can style it as you wish and clicking it will send the visitor to the last page they viewed.
If you want to use a button, you can create a buton with the shortcode wand and use this as the manual link: javascript:history.back()

[av_button label='Go Back' icon_select='yes' icon='ue831' font='entypo-fontello' button_type='' link='manually,javascript:history.back()' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='large' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']

Best regards,
Mike

Hey Daniela,
I recommend creating a dotsmenu as described in our documentation and create the simple custom menu in the element:

with the custom class dotsmenu:

then to use entypo-fontello icons, go to your icon element and hover over the icons that you want to use and the chrcode will show, always drop the first “U”, so the code that you will use for this screenshot will be \e804

Then use this css, at teh bottom you will see the six icons for the six menu items in my example, add more if you wish:

#top .dotsmenu {
  background: transparent;
  position: fixed!important;
  right: 10px;
  top: 50%!important;
  transform: translateY(-50%);
  border: none!important;
  max-width: 30px!important;
}

#top .dotsmenu .av-subnav-menu > li {    
    display: inline!important;
    margin: 10px !important;
}

#top .dotsmenu .av-subnav-menu li a {
  max-width: 40px;
  max-height:45px;
  border-radius:0; 
  overflow:hidden;
  padding: 0 !important;
  border: none!important;
  background: transparent;
}

#top .dotsmenu .av-subnav-menu li a .avia-bullet {
  display: none !important;
}
#top .dotsmenu .av-subnav-menu li a .avia-menu-text { 
visibility: hidden;
}

@media only screen and (max-width: 767px) {
.responsive #top .dotsmenu {
  background: transparent;
  position: fixed!important;
  right: 0;
  top: 50%!important;
  transform: translateY(-50%);
}}
#top .dotsmenu .av-subnav-menu li a:before {
 display: inline-block !important;
 font-size:30px;
 color: #fff;
}
#top .dotsmenu .av-subnav-menu li:nth-child(1) a:before {
  content: '\e804';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(2) a:before {
  content: '\e82a';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(3) a:before {
  content: '\e83d';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(4) a:before {
  content: '\e8b3';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(5) a:before {
  content: '\e8d2';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(6) a:before {
  content: '\e8b9';
  font-family: 'entypo-fontello';
}

This is the result:

Best regards,
Mike

Hey Erin,

Thank you for the inquiry.

By default, the content in the footer inherits the default font size. If you wish to adjust it, you can use this code in the Quick CSS field:

#footer, #footer p, #footer li {
    font-size: 0.8em;
}

Best regards,
Ismael