Hi,

Glad it works. Try to use this css code to adjust the size of the social icons in the burger menu container.

.burger_social_bookmarks li a {
	font-size: 16px !important;
}

Best regards,
Ismael

Hey PilatInformatique,

Thank you for the inquiry.

The product gallery seems to be working properly now, showing the appropriate image for the selected variation. Did you set the Enfold > Shop Options > Product Gallery to the second option (Woocommerce 3.0 Product Gallery)?

Best regards,
Ismael

Hi,

Sorry for the delay. This seems like a duplicate of the following thread wherein we provided a possible solution.

// https://kriesi.at/support/topic/i-would-like-an-new-text-alignement-on-my-phone-display/#post-1267668

We will close this thread for now. Please continue on the previous post.

Best regards,
Ismael

Hi,

Thank you for the screenshot.

We can use the avia_meta_header hook to insert additional elements in the top header and the get_search_form function to render the search bar. Please add this snippet in the functions.php file.

add_action('avia_meta_header', function() { 
	get_search_form();
}, 10);

add_filter('avf_execute_avia_meta_header', '__return_true');

It might require a few css or style adjustments.

Best regards,
Ismael

Hey Elena,

Thank you for the inquiry.

Where can we see the issue or the page with the color section? Please post the site or page URL in the private field so that we could check the issue. If possible, please include an administrator account and make the Appearance > Editor accessible so that we could edit the files when necessary.

Best regards,
Ismael

Hey enfold_user,

Thank you for the inquiry.

That may be possible by using very wide or long images in the slide and set it so that the image moves or transitions from left to right or vice versa.

Best regards,
Ismael

Hey Actionrev,

Thank you for the inquiry.

It looks distorted on certain screen sizes because of this css code.

.avia-section, .avia-section .av-parallax-inner {
	background-size: 100% 100% !important;
}

You may need to wrap it inside a css media query so that it only affects screens with the same aspect ratio as the background image.

// https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Best regards,
Ismael

Hi,

Thank you for the info.

The password for the username is incorrect, unfortunately. Please check it carefully or provide another valid account so that we could access the dashboard.

Best regards,
Ismael

Hey Stefan,

Thank you for the inquiry.

How did you set the Product Grid element to display the categories? Please post the site or page URL so that we could inspect the element.

We might be able to use the snippets provided in the following thread and customize it a bit so that the description displays below the product image.

// https://stackoverflow.com/questions/19249756/how-to-display-woocommerce-category-description

Best regards,
Ismael

Hey barabasone,

Thank you for the inquiry.

Try to apply a unique class name (Advanced > Developer Settings > Custom CSS Class) to the 1/5 column elements containing the descriptions, use “description-column” for example, then use the following css code to adjust the width of the columns on mobile view.

@media only screen and (max-width: 767px) {
.description-column {
    width: 48% !important;
    margin-left: 1%;
    float: left;
    clear: none;
}
}

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

But due to the columns’ predefined styles, the layout might look a bit different compare to the screenshot.

Another solution is to create another set of text description or specifications that is fully configured for mobile view. You may need to place all text and the required html structure in a single text block and apply the custom styles accordingly. Using css flex might be of help in this case.

// https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The html structure might look like this.

<div class="left-column">
descriptions or specifications here</div>
<div class="right-column">
descriptions or specifications  here</div>

Best regards,
Ismael

Hi,

@CodeSamurai: Thank you for the info. Did you install a different minification plugin?

@CloudyPro: Have you tried using a different compression plugin? Most cache plugins also have this option by default, so you might have to test the options or the plugin settings to find out which combination works best for your server.

Best regards,
Ismael

Hi,

Great! Glad to know that you have found a solution. In hindsight, using Javascript is bit of an overkill. Please feel free to open a new thread if you need anything else.

Have a nice day.

Best regards,
Ismael

Hi,

You can use this css code to apply a border around the button on mouse hover.

#top .avia-button:hover .avia_button_background {
	border: 1px solid green !important;
}

But you have to adjust this css code, and remove the top margin.

.second-button .avia-button {
	border: 10px solid #FFF !important;
	z-index: 2;
	z-index: 2;
	float: none !important;
	margin-top: -35px;
}

Then add this css code to pull the button upwards.

.second-button {
	top: -35px;
	position: relative;
}

Best regards,
Ismael

Hi,

Sorry for the delay. We edited the snippet or filter in the functions.php file a bit, and added the spotify icon and associate the custom font icon to it. This is the adjusted filter in the functions.php file.

// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
	$icons['apple']	 = array( 'font' =>'newicons', 'icon' => 'uf179');
	$icons['spotify']	 = array( 'font' =>'newicons', 'icon' => 'uf327');
	return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
	$icons['apple'] = 'apple';
	$icons['spotify'] = 'spotify';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

You can now edit the spotify icon in the Enfold > Social Profiles panel.

Best regards,
Ismael

Hi,

Thank you for the screenshot.

We could not reproduce the issue on our end and for some reason we cannot inspect the site using the browser inspector. Did you disable it, or install a plugin that blocks browser inspection?

The background of the cells are probably not displaying correctly on mobile devices because it is fixed. Please try to revert the background-attachment property back to scroll on smaller screens.

@media only screen and (max-width: 767px) {
    .flex_cell {
	background-attachment: scroll !important;
    }
}

Best regards,
Ismael