Hey ovrit,

Thank you for the inquiry.

To adjust the spacing around the text in the comment box, you can add some padding to it using CSS. Here’s an example:

#reviews.cr-reviews-ajax-reviews #comments.cr-reviews-ajax-comments .cr-ajax-reviews-list .review .comment-text {
    padding: 1em;
}

And to fix the alignment of the stars, add this.

#comments span, .minitext, .form-allowed-tags, #reply-title small, #commentform label {
    font-size: inherit;
    line-height: inherit;
}

Best regards,
Ismael

Hey Anna_Tewes,

Thank you for the inquiry.

What do you mean by “Reitersektion”? We cannot find the same text in the screenshot. To change the font size of an element, you can go to the Styling tab of the element and adjust the Font Sizes options, or you can go to the Enfold > Advanced Styling panel to edit the default styles of the elements.

Best regards,
Ismael

Hi,

I have created a new site, but I have select the footer and socket will be shown, but it is not working.

You modified the header.php file on your child theme. Please rename it to “old-header.php”, copy the fresh header.php file from your parent theme to your child theme, and reapply your modifications on the file and check if that helps.

And another thing is the text of home slide not resize in the mobiles.

Please edit your slide and go to Styling > Font Sizes, select mobile icon and change the font size: https://i.imgur.com/3JWpxCu.png

Also, you have the script I shared in the private content field in the style.css file of your child theme. Please refer to this post: https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#add-a-script-to-head-section and move it to the functions.php file of your child theme.

Best regards,
Yigit

Hi,
To change the secondary menu item font size in the mobile menu please try this css:

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a {
	font-size: 23px;
}

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

Best regards,
Mike

Hi,
Thank you for the link to your site, to reverse the color for the social icons with the hover state and make them larger please try this css:

#top #wrap_all #header_main .social_bookmarks li a {
    width: 40px;
    line-height: 40px;
}
#top #wrap_all #header_main .social_bookmarks {
    height: 40px;
}
#top #wrap_all #header_main .social_bookmarks li {
width: 40px;
font-size: 30px;
}
#top #wrap_all #header_main .av-social-link-facebook a {
    color: #fff;
    background-color: #37589b;
}
#top #wrap_all #header_main .av-social-link-facebook:hover a, 
#top #wrap_all #header_main .av-social-link-facebook a:focus {
    color: #808080;
    background-color: transparent;
}
#top #wrap_all #header_main .av-social-link-twitter a {
    color: #fff;
    background-color: #46d4fe;
}
#top #wrap_all #header_main .av-social-link-twitter:hover a, 
#top #wrap_all #header_main .av-social-link-twitter a:focus {
    color: #808080;
    background-color: transparent;
}
#top #wrap_all #header_main .av-social-link-instagram a {
    color: #fff;
    background-color: #a67658;
}
#top #wrap_all #header_main .av-social-link-instagram:hover a, 
#top #wrap_all #header_main .av-social-link-instagram a:focus {
    color: #808080;
    background-color: transparent;
}
#top #wrap_all #header_main .av-social-link-youtube a {
    color: #fff;
    background-color: #a72b1d;
}
#top #wrap_all #header_main .av-social-link-youtube:hover a, 
#top #wrap_all #header_main .av-social-link-youtube a:focus {
    color: #808080;
    background-color: transparent;
}
#top #wrap_all #header_main .av-social-link-linkedin a {
    color: #fff;
    background-color: #419cca;
}
#top #wrap_all #header_main .av-social-link-linkedin:hover a, 
#top #wrap_all #header_main .av-social-link-linkedin a:focus {
    color: #808080;
    background-color: transparent;
}

After applying the css, please clear your browser cache and check.
This is the expected results:

Best regards,
Mike

Hey Jochen,
Thanks for the link to your pages, you cannot use the Advanced Layout Builder to create your category pages unless you create specific pages and redirect to them.
But you can change the layout of the category pages, for example, if you want to use the grid layout add this filter to your child theme functions.php:

add_filter('avf_blog_style','avia_change_category_blog_layout', 10, 2); 
function avia_change_category_blog_layout($layout, $context){
if($context == 'archive') $layout = 'blog-grid';
return $layout;
}

To create a custom header to the top of your category pages you could add the element shortcode via a function like this:

add_action('ava_after_main_title', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if(is_category('news')) {
		echo do_shortcode("[av_one_full first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_width='10' row_boxshadow_color='' margin='0px' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' mobile_breaking='' mobile_column_order='' border='' border_style='solid' border_color='' radius='' radius_sync='true' min_col_height='300px' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' column_boxshadow_width='10' column_boxshadow_color='' background='bg_color' background_color='#7bb0e7' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' 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='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='' template_class='' aria_label='' av_uid='av-leu1xz8x' sc_version='1.0'][av_heading heading='Custom Header' tag='h3' style='blockquote modern-quote modern-centered' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='' link_target='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg=''][/av_heading][/av_one_full]");
	}
}

In the code above you will note that I added the header only to the category News in if(is_category(‘news’)) this demonstrate that you can have different headers for different categories, you will also note that this element is not a color section, color sections will cause issues on pages with sidebars, you are better off using single full width columns.
You can use the shortcode wand to get the element shortcode or Enable the Avia Layout Builder Debugger.
Give this a try and if you have trouble include an admin login so we can assist.

Best regards,
Mike

Hi,

Thanks for the clarification. Did you try adjusting the font size for the H1 element for small screen sizes under Enfold->Typography?

Best regards,
Rikard

Hi,

Thank you for the update.

The styles for the overlay pause/play icon is missing in your installation for some reason. To fix the issue, we added this code in the Quick CSS field.

#top .avia_playpause_icon {
    position: absolute;
    height: 100px;
    width: 100px;
    margin: -50px 0 0 -50px;
    background: #000;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    top: 50%;
    left: 50%;
    z-index: 50;
    display: none;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
}

#top .avia_playpause_icon:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    color: #fff;
    line-height: 100px;
    text-align: center;
    font-size: 40px;
}

Please make sure to purge the cache before checking the page again.

Best regards,
Ismael

Hi,

Looks like the facebook social icon was added using the icon shortcode or element. For the linked icon, try to include this shortcode in the text widget.

[av_font_icon icon='ue8fd' font='entypo-fontello' style='' caption='' size='40px' position='left' color='' link='manually,http://yourlinkedinprofile.com' linktarget='' 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-les64g5y' sc_version='1.0' admin_preview_bg=''][/av_font_icon]

Replace the value (yourlinkedinprofile) of the link parameter in the shortcode with the actual linkedin profile URL.

Best regards,
Ismael

Hi Tom,

You had the following code Quick CSS field

h2.tribe-events-single-section-title {
 color: #919191;
 font-size: 20px;
font-family: var(--tec-font-family-sans-serif);
}

CSS selector was weak so I changed it to the following one

#top h2.tribe-events-single-section-title {
 color: #919191;
 font-size: 20px;
font-family: var(--tec-font-family-sans-serif);
}

Also, you had the “Hiding the email address and divider in the organiser’s page:” and it was not wrapped inside comment tags. That breaks your CSS. If you’d like to add comments to your CSS, please do so as following

/* Hiding the email address and divider in the organiser's page: */

Please review your website.

Best regards,
Yigit

Hi,

Is there any way to limit this edit to just the top blog element? Thank you.

As suggested above, you can apply a custom css class name (av-custom-featured-blog for example) to the top blog element (Advanced > Developer Settings > Custom CSS Class) and use it in the css rule above to specifically target the blog element.

#top.home #wrap_all .main_color .av-custom-featured-blog .post-entry h2.post-title {
    font-size:32px;
}

In the edited css above, we added the selector “.av-custom-featured-blog” to target the element with the class name “av-custom-featured-blog”.

Best regards,
Ismael

Hey mescalytequila,

Thank you for the inquiry.

You can add this css code to adjust the font size of the price and the strike-through.

#top .price, #top .price span, #top del, #top ins {
    display: inline;
    text-decoration: none;
    font-size: 32px;
    line-height: 32px;
    font-weight: 600;
}

You should remove this css code to vertically align the strike-through with the price.

.price span {
    font-size: 32px!important;
    color: #89b82b!important;
}

After doing the modifications above, you may need to toggle or temporarily disable the Enfold > Performance > File Compression settings.

Best regards,
Ismael

Hey es.design.ma,

Thank you for the inquiry.

You can actually set different font sizes for various screen sizes and devices in the slides’ Styling > Font Sizes panel. Look for the Font Size default – used for all screen sizes(no media query) settings in the panel, then click the little devices icon to adjust the font size for a specific device.

Best regards,
Ismael