Hey!

It’s not possible in CSS to directly read the element current font size and based on that apply a value to another property, however there are some dynamic units you can use (em/rem):
https://j.eremy.net/confused-about-rem-and-em/

Regards,
Josue

Try changing your font declaration code to the following:

.header_color .main_menu ul:first-child > li > a { 
    color: DarkGray; 
    font: 500 14px sans-serif;
    font: 500 30px 'AmaticSC-Regular';
}

That way the font-size value will be bound to the font-family so if ‘AmaticSC-Regular’ is available it will be 30px, otherwise 14px.

Cheers!
Josue

Hi RobPhrase!

Try adding this to your custom CSS.

.grid-entry-title a { font-size: 20px !important; }
.portfolio-preview-title a { font-size: 20px !important; }

Best regards,
Elliott

Add this to your custom CSS:

#top .ajax_search_response a.ajax_search_entry {
    display: block;
    text-decoration: none;
    line-height: 1.4em;
    font-size: 12px;
    height: auto;
    padding: 10px 16px;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    clear: both;
    overflow: hidden;
    float: none;
    width: auto;
    text-align: left;
}

Best regards,
Josue

Hi cdubose574!

Would you like to try reducing the font size to fit it on one line? Or another option would be to hide whatever text overflows onto the second line.

Go ahead and send us a link to your page and highlight in your screenshot exactly how your wanting to change it so we can get a better idea.

Regards,
Elliott

Hey!

A. Use the following to make them appear on hover (what did you mean only in mobile? you should know that there is no ‘hover’ in mobile):

.avia-slideshow-arrows {
    display: none;
}

.avia-testimonial-wrapper:hover .avia-slideshow-arrows{
    display: block;
}

B. They are always in the middle from what i see.

C. Use the following to make them skinnier (adjust as needed):

#top .avia-slideshow-arrows a{
    height: 30px;
    width: 30px;
    line-height: 32px;
    font-size: 12px;
}

.avia-slideshow-arrows a:before{
    line-height: 32px;
}

Cheers!
Josue

• This reply was modified 10 years, 10 months ago by Josue.

Hey!

Sorry for the late reply.

1. That’s currently not possible in Enfold -out of the box- but i managed to get a working solution, first add this to your child theme functions.php:

function attach_social_icons_to_mobile_menu(){
?>
<script>
(function($){
    $(window).load(function() {
    		var social_buttons 		= $("#header").find('ul.social_bookmarks').clone(),
    			mobile_advanced 	= $("#mobile-advanced");

			mobile_advanced.prepend(social_buttons);
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'attach_social_icons_to_mobile_menu');

And this to your child theme style.css:

#mobile-advanced ul.social_bookmarks {
    display: block !important;
    position: absolute;
    top: 0;
    left: 25px;
    top: 25px;
}

#mobile-advanced ul.social_bookmarks li, #mobile-advanced ul.social_bookmarks li a {
    clear: none;
    width: 40px;
    min-height: 40px;
    line-height: 40px;
}

#mobile-advanced ul.social_bookmarks li, #mobile-advanced ul.social_bookmarks li a{
    border: 0 !important;
}

#mobile-advanced ul.social_bookmarks li > a:before{
    content: attr(data-av_icon);
    position: relative;
    top: auto;
    font-size: 22px;
    margin-left: 0;
}

4D: That would require additional custom development, unfortunately that’s not something we can assist you with here.

4E: Add this to Quick CSS / child style.css:

.avia-progress-bar .progress {
    box-shadow: none;
}

P.S. Don’t push your topics, it creates the contrary effect as it puts the thread last in our support queue (it orders topics based on activity).

Regards,
Josue

• This reply was modified 10 years, 10 months ago by Josue.