Hi,

I want to make the layout from this page: https://www.langbrett.com

They actually set it up so that the height of the right image (446px) is the same as the combined height of the two images (203.2px each) plus the height of the caption (around 40px) in the left side. They then set all items to stack above each other when the screen width is less than 1180px. As @guenni007 mentioned, this is nearly impossible without controlling the actual height of the images and without using absolute widths as they did in the site above.

Best regards,
Ismael

Hi,

Sorry for delay. Unfortunately, we can’t answer that many inquiries in a single thread, so we’d like to ask you to open a different ticket or post for each issue or request. Users usually receive faster response that way.

Now to answer your question, the columns don’t respond properly and the logo images are still visible on mobile device because the sections containing them are outside the main container (wrap_all). This usually happens when html tags are not closed properly.

Did you add any html tags (e.g strong, p, span etc) in the page? Please make sure that all tags are closed properly.

Best regards,
Ismael

Hi,

Did you move the site somewhere else? We can’t access it anymore.

The theme will only print the inline style if the wp-content > uploads > dynamic_avia > enfold.css file doesn’t exists. Do you see the dynamic css in the directory?

Best regards,
Ismael

Hi,

Thank you for the info.

We are not really sure why this error occurs, but what it says is that it fails to open the php/inc-autoconfig.php file, which is a bit odd because the site is working fine as you said. Maybe it’s server-related but we can’t be sure. Please let us know if you find any errors.

Best regards,
Ismael

Hi!

Although Google explicitly says: Please do not place anything off-screen.

The toggle wrap is not off screen because the css property left: 120% is relative to the parent container and not the browser view port. This is true unless the maximum width of the container is the same as the view port and the page has no sidebar, which is rarely the case. Please check the screenshot below.

Screenshot: https://imgur.com/a/3CZbPLk

As you can see in the screenshot, the invisible or inactive toggle wrap is not completely off the screen, but upon closer inspection, I’m not sure why it has to have that css property because the toggler works fine without it. But still, it doesn’t place the toggle_wrap container off the screen.

And according to the following articles, there’s no definitive answer on how search engines actually handle hidden content but they said that you don’t actually get penalized for hiding a content, the content will only have less influence to the site ranking compare to those that are fully visible. So if you’re serious about SEO, maybe try to reserve using tabs, accordions or read more links for not so significant content and make sure that the most important ones are fully visible in the page.

// https://edgy.app/how-does-google-view-hidden-content
// https://moz.com/blog/google-css-javascript-hidden-text

Cheers!
Ismael

Hi,

All you need to do is search for how-to accordion or tabs on Google and you’ll find thousands of examples that almost do the same thing. And are you aware that the left property there is relative to the parent container (accordion) and not the browser view port? This means that the content that is hidden is not off the screen.

Best regards,
Ismael

Hey Ink_Eye,

Thank you for the inquiry.

The padding property sets the aspect ratio of the images, so with 80% bottom padding, the aspect ratio would be 5:4 and with 160% padding, aspect ratio would be roughly 9:16 which is the portrait mode. You can learn more about it in the following article.

// https://css-tricks.com/aspect-ratio-boxes/

The class attribute of the masonry items are automatically assigned based on the width and height of the original image, so very tall images will be in portrait mode and those that are very wide are usually in landscape mode.

Best regards,
Ismael

Hey P3T3R_0ne,

Thank you for the inquiry.

You can find the bbPress modifications inside the enfold\config-bbpress\config.php file. You might want to remove or override this filter.

add_filter('avia_breadcrumbs_trail','avia_bbpress_breadcrumb');

To override it, just use the remove_filter function in the functions.php file.

remove_filter('avia_breadcrumbs_trail','avia_bbpress_breadcrumb');

Best regards,
Ismael

Hey peterolle,

Thank you for the inquiry.

Have you tried using the WordPress REST API? You should be able to fetch posts or any available data from your WordPress installation to any platform using HTTP requests.

// https://developer.wordpress.org/rest-api/reference/

Best regards,
Ismael

Hi,

It’s not really recommended to embed text in the featured images and it’s also quite redundant in your case because the text is the same as the post title. You should remove the embedded text or make sure that the size of the images are the same.

You can also set the Blog Posts element to use the uncropped version of the featured image in the Styling > Appearance > Preview Image Size settings. Select the second option and select “No Scaling” from the “Select custom preview image size” dropdown.

Best regards,
Ismael

Hi,

Did you define the expiration or cache duration of the site resources in the .htaccess file? This documentation should help.

// https://gtmetrix.com/leverage-browser-caching.html

Example of cache expiry config.

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

Best regards,
Ismael

Hi,

You can actually define additional custom cookies in the Enfold > Privacy > Cookie Handling > Advanced Options > Additional Custom Cookies section. Add the cookie name and the cookie path, then you’ll be able to use the following shortcode inside the privacy policy page or the privacy modal popup window to create a toggle and allow your users to disable or enable the custom cookies when necessary.

[av_privacy_custom_cookie cookie_name=""]
[av_privacy_custom_cookie cookie_name=""]Your text here[/av_privacy_custom_cookie] 

If the name of the cookie is “security-cookie” for example, then the modified shortcode will look something like this.

[av_privacy_custom_cookie cookie_name="security-cookie"]
[av_privacy_custom_cookie cookie_name="security-cookie"]Toggle Security Cookie[/av_privacy_custom_cookie]

Best regards,
Ismael

Hi,

You can copy the whole avia_woocommerce_product_elements function in the child theme, rename the function and do your own modifications.

remove_filter( 'avf_builder_elements', 'avia_woocommerce_product_elements', 500, 1 );
add_filter( 'avf_builder_elements', 'avia_woocommerce_product_elements_mod', 500, 1 );

function avia_woocommerce_product_elements_mod( $elements )
{
	$posttype = avia_backend_get_post_type();

    if( ! empty( $posttype ) && $posttype == 'product' )
    {
        $elements[] = array("slug"	=> "avia_product_hover",
            "name" 	=> "Hover effect on <strong>Overview Pages</strong>",
            "desc" 	=> "Do you want to display a hover effect on overview pages and replace the default thumbnail with the first image of the gallery?",
            "id" 	=> "_product_hover",
            "type" 	=> "select",
            "std" 	=> "",
            "class" => "avia-style",
            "subtype" => array("Yes - show first gallery image on hover" => 'hover_active', "No hover effect" => ''));

        $counter = 0;
        foreach( $elements as $element )
        {
            if( $element['id'] == 'sidebar' ) 
			{
				$elements[ $counter ]['required'] = '';
			}
            else if( $element['id'] == 'layout' ) 
            {
	            $elements[ $counter ]['builder_active'] = true;
	           // unset($elements[$counter]);
            }
            $counter++;
        }
    }

	return $elements;
}

Best regards,
Ismaele

Hi,

The page will only display the number of posts set in the blog settings. You can adjust it by editing the Blog Posts’ Styling > Pagination > Post Number settings or by adjusting the value of the Blog pages show at most field in the Settings > Reading panel.

You can also create a custom page, add the Blog Posts element and set it to display all posts. You may need to create a custom link or button to redirect to that custom page.

Best regards,
Ismael

Hi,

Did you install a plugin that adds schema markup to the templates? We inspected the wplugins\bbpress\includes\common\template.php, which contains the breadcrumb markup, but we didn’t find the span tag with the itemprop attribute.

<span itemprop="name"></span>

This is the the whole bbp-breadcrumb-current markup.

'include_current' => $pre_include_current,
			'current_text'    => $pre_current_text,
			'current_before'  => '<span class="bbp-breadcrumb-current">',
			'current_after'   => '</span>',

Best regards,
Ismael