Hey xfacta,

Thank you for the inquiry.

You can use the following css code to adjust the style of the elements inside the header meta or the small bar above the main menu.

#top #header_meta a, #top #header_meta li, #top #header_meta .phone-info {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 300;
    text-decoration: none !important;
}

#header_meta .sub_menu {
    float: left;
    z-index: 2;
    font-size: 1.2em;
    line-height: 30px;
    position: relative;
    top: 10px;
}

#header_meta .phone-info {
    float: left;
    font-weight: bold;
    line-height: 20px;
    font-size: 1.2em;
    padding: 5px 0;
}

And to re-enable the social bookmarks on mobile view, you can include this css code.

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header .social_bookmarks,
  .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

Unfortunately my questions was centred not around availability of fonts, but how to speed up loading times.

If you prefer not to switch to a different font with a smaller file size, another option is to upgrade your hosting plan or subscribe to a Content Delivery Network (CDN) to accelerate the delivery of site resources, including fonts. However, we strongly advise considering an alternative font since a 12MB file size is quite large especially for a font file and this can significantly impact website loading times. This may result in slower user experiences, particularly on slower internet connections or mobile devices.

You can also implement basic site optimization by following the recommendations outlined in the following articles.

// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
// https://gtmetrix.com/wordpress-optimization-guide.html

Best regards,
Ismael

Hey ballindigital,

Thank you for the inquiry.

You can use the Fullscreen Slider element to recreate such a slider layout. Add a caption title and caption text, adjust the Styling > Caption > Caption Positioning settings, then configure the caption sizes in the Styling > Font Sizes panel.

Best regards,
Ismael

Hey fabienneRedUmb,

Thank you for the inquiry.

Where did you get the font? The fonts (t2020stylee-regular.ttf & tt2020stylef-regular-ascii.ttf) are nearly 12MB in size, which is quite large. Have you considered using Google Fonts instead? Fonts like Roboto or Open Sans have an average file size of 170 KB, which could result in significant difference in loading speed or duration.

Best regards,
Ismael

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

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #sub_menu1 .container {
    width: 100%;
    max-width: 100%;
}
#av-custom-submenu-1 span {
	font-size: 12px;
}
#top #av-custom-submenu-1.av-subnav-menu > li > a {
    padding: 0px 5px 0px 5px;
}
#top #sub_menu1 .av-submenu-pos-right {
    text-align: center;
}
.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:600!important;
}
}

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

function custom_sticky_sub_menu() { ?>
  <script>
(function($){
  var width = $(window).width();
var $stickyTop = $('#sub_menu1');
if (width <= 767) {
$stickyTop.waypoint(function(direction) {
  if (direction === 'down') {
     $stickyTop.addClass('sticky-top');
  }
  if (direction === 'up') {
     $stickyTop.removeClass('sticky-top');
  }
}, {
  offset: '0%'
});
}
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_sticky_sub_menu', 99 );

Then clear your caching plugin and browser, please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
In my test with makes the sub-menu sticky on mobile ans reduces the size of the menu itme so they fit better, feel free to adjust to suit.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
To adjust the main font size for different screen sizes please go to Enfold Theme Options ▸ General Styling ▸ Typography ▸ Advanced Options: Customize Typography Settings you will see a option for four screen sizes:

After selecting these ensure that you clear your cache and caching plugins, and if your server is using a object-oriented cache such as Memcached, Redis, Varnish, Litespeed, etc. you may need to also clear it.
Please note that we ask that each thread stays on a specific topic, this helps other users find solutions based on the opening subject line quicker. For further questions please open a new thread

Best regards,
Mike

Hi,
Unfortunately the min height will need to be adjusted multiple times for the different screen width and the font sixe for the back side will need to be smaller to make up for the lost space. It doesn’t look like there is a “easy” fit for this.
You could use the css above as an example and then use media queries to assign different heights for the different screen sizes that are commonly used, but it won’t be a “fluid” change for all screen sizes.

Best regards,
Mike

Hi,
Try this css instead where the line height matches the font size:

@media only screen and (max-width: 767px) { 
	.avia-table a {
		font-size: 16px;
	}
	.avia-table li {
		line-height: 16px;
	}
}

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

Best regards,
Mike

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

@media only screen and (max-width: 767px) { 
	.avia-table a {
		font-size: 12px;
	}
}

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

Best regards,
Mike

Hey schweg33,
Thank you for the link to your site, but it looks like we won’t be able to see your elements without a login.
What font size do you want to use for mobile?

Best regards,
Mike

Hi,
The css classes .site-header & .top-bar are not typical for Enfold, I would recommend this css:

#header_meta .container {
min-height: 60px;
}

#header_meta .container * {
font-size: 16px;
}

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.
If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike

Hey joandjaxx,
Please remove this css:

[data-av_icon]:before {
    font-size: 50px!important;
}

and use this instead:

.iconbox_icon[data-av_icon]:before {
    font-size: 50px!important;
}

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

Best regards,
Mike

Hey joandjaxx,

Thank you for the inquiry.

You can replace the modification with the following code.

/* Icon Size */
.iconbox [data-av_icon]:before {
    font-size: 50px!important;
}
.iconbox_icon {
    margin-right:20px!important;
}

Best regards,
Ismael

Hey biggsuccess,

Thank you for the inquiry.

We have found an extra curly brace in the css code above, which renders the css rules below it invalid. We also adjusted the position of the css media queries.

.main_menu {
  background: white;
}

#top #header_meta a,
#top #header_meta li,
#top #header_meta .phone-info {
  font-size: 14px;
}

.avia-layerslider {
  box-shadow: none !important;
  border-top-width: 0 !important;
}

div#after_layer_slider_1 {
  border-top: none !important;
}

.home #main>.container_wrap_first>.container>.content {
  padding-bottom: 0;
}

@media only screen and (max-width: 430px) {
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 182px !important;
  }
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
  .responsive #top #wrap_all #main {
    padding-top: 119px !important;
  }
}

@media only screen and (max-width: 768px) {
  .responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: 100% !important;
  }

  .responsive #top #header #header_main .inner-container .widget .avia-button.avia-size-medium {
    padding: 12px 5px 10px;
    font-size: 12px;
    min-width: 60px;
  }

  .responsive #top #header #header_main .inner-container .widget>div {
    padding: 0;
  }

  .responsive #top #header #header_main .inner-container .widget>div>div {
    text-align: center;
  }
}

Best regards,
Ismael

Hey maryenvato,

Thank you for the inquiry.

We can add a few css modifications in the Enfold > General Styling > Quick CSS field to adjust the style of the first column on smaller screens. Please start with this css code.

@media only screen and (max-width: 768px) {
  /* Add your Mobile Styles here */
  .av_textblock_section.av-lr4yjeic-cd8285095e8d65e185685adbb051d6f7 table th.avia-desc-col {
    font-size: 0.9em;
    word-break: break-word;
    width: 130px;
  }
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after applying the modification.

Best regards,
Ismael

Hi,

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

@media only screen and (max-width: 990px) {
.page-id-8445 h2 {
  font-size: 18px; 
}
}

Best regards,
Rikard