Hey Highlander-2013,

Thank you for the inquiry.

You can find more styling options by editing one of the slides, go to the Styling tab, and you should find more settings in the Colors and Font Sizes toggle. If you want to add your own css modifications, please use the Enfold > General Styling > Quick CSS field.

Best regards,
Ismael

Hi,

Please try the following in Quick CSS under Enfold->General Styling:

.av-catalogue-title {
  font-size: 18px;
}

.av-catalogue-price {
  font-size: 20px;
}

.av-catalogue-content {
  font-size: 15px;
}

Best regards,
Rikard

Hi,

Thank you for the update.

We created a private test page (see private field) and edited the modification in the Quick CSS field a bit to display the border.

/*------------------------------------*/
/*             For button in slider               */
/*------------------------------------*/
#top .avia-slideshow .avia-caption-content  .av-slide-button {
    text-transform: uppercase;
    letter-spacing: 1px;
    border-width: 1px;
    color: #fff;
    background-color: #006f49;
    display: inline-block;
    line-height: 1;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
    border: 1px solid #ffffff;
}

Best regards,
Ismael

Hi,
This is the Caption Positioning option in the slide:

this is the font size option in the slide:

I did this for your first slide, please check and adjust to suit:

Best regards,
Mike

Hey bernhardleube,

Please try the following in Quick CSS under Enfold->General Styling:

ul li::marker {
  color: black;
  font-size: 1em;
}

Best regards,
Rikard

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

#top.page-id-472 #main .main_color .avia-data-table * {
	border: none;
	background-color: #fff;
	font-size: 18px;
	text-align: left;
}
#top.page-id-472 .main_color .avia-data-table.avia_pricing_minimal th {
    color: #009bdd;
    width: 10%;
}

Best regards,
Mike

Hi,

Thanks for that. Please try copying this shortcode:

[av_section min_height='' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='border-extra-arrow-down' bottom_border_diagonal_color='#ffffff' bottom_border_diagonal_direction='' bottom_border_style='' id='Demos' color='main_color' custom_bg='' src='https://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2015/07/isometric-1.jpg' attachment='447' attachment_size='full' attach='scroll' position='center left' repeat='contain' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0' av_uid='av-laduq6']
[av_one_half first min_height='' vertical_alignment='av-align-top' space='no_margin' custom_margin='aviaTBcustom_margin' margin='50px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='left-to-right' mobile_display='' av_uid='av-l5utwe']

[/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='no_margin' custom_margin='aviaTBcustom_margin' margin='0px' margin_sync='true' padding='50px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='rgba(255,255,255,0.85)' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='left-to-right' mobile_display='' av_uid='av-kzc3a6']

[av_heading tag='h1' padding='20' heading='A growing library of more than 2 dozen demos' color='custom-color-heading' style='blockquote modern-quote' custom_font='#000000' size='40' subheading_active='' subheading_size='15' custom_class='' av_uid='av-kpdzb2'][/av_heading]

[av_hr class='custom' height='50' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#000000' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-klz60e']

[av_textblock size='' font_color='' color='' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-keqweu']
Our demos are one of a kind: we only offer<strong> full concept demos</strong> with multiple pages that show whole projects, unlike others who only include a single page and call that a demo ;)

You can import them with <strong>a single click</strong>, they are easily adaptable to your needs and you can chose from a variety of layouts and niche designs. In addition to that you can also use the <strong>demo images used in our demo for your own project</strong>!
[/av_textblock]

[/av_one_half]
[/av_section]

Best regards,
Rikard

Hi,

Thank you for the info.

It’s not possible to add buttons to the Easy Slider element by default, but you should be able to manually create the buttons using html and add them to the sliders’ caption fields.

HTML:

<div class="av-button av-slide-button av-size-sm">Make an Appointment</div>

CSS:

.av-slide-button {
    text-transform: uppercase;
    letter-spacing: 1px;
    border-width: 1px;
    color: #fff;
    background-color: #006f49;
    border-color: #fff;
    display: inline-block;
    line-height: 1;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 3px;
    color: #fff;
    fill: #fff;
    text-align: center;
    transition: all .3s;
}

Best regards,
Ismael

Hi,
I updated your custom css in your Quick CSS from this:

#top div .av-dark-form input[type="text"] {
  color: #222;
  border-color: #222;
  border-width: 1px !important;
  background-color: transparent;
  font-size: 15px !important;
  letter-spacing: 1px;
}

to this:

#top div .av-dark-form input[type="text"],
#top #main .av-dark-form input[type="email"] {
  color: #222;
  border-color: #222;
  border-width: 1px !important;
  background-color: transparent;
  font-size: 15px !important;
  letter-spacing: 1px;
}

and now your email field border width matchs the other fields
Please clear your browser cache and check.

Best regards,
Mike

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