Bug in last row of table

Hi,
Thanks for the feedback I think I understand better now, basically you want to disable all of the mobile styles, which may make your site hard to read on mobile devices because all of the elements will be very small. Typically this would be a very big job to overwrite all of the mobile css, but I found a solution that wotks on my demo site, notice in this screenshot that the elements display like on a desktop just smaller:

Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, or if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save.

function my_custom_viewport_meta( $meta_viewport ) {
    return '<meta name="viewport" content="width=1024">';
}
add_filter( 'avf_header_meta_viewport', 'my_custom_viewport_meta' );

After applying please clear your browser cache and check.

Best regards,
Mike

Hi,
The function above can’t be applied to certain sections, it is applied to the whole page for it to work, but I think that you can choose which pages to apply it to, so if you have a page that doesn’t need it it all we could disable it. As this function seems to help for most of your site, as I understand, it sounds like just a couple of areas that you want to adjust.
So for example on your /iscrizione-master/ page you wanted to change this:

So I found that if we use css media queries for 1024px it seems that they will work, that is when the page is really 425px the site and css thinks it is 1024px, but above 1024px the css seems to work correctly.
So try adding this custom class to this color section that you don’t want to show on mobile screens: hide-on-small and then create a new color section with the changes per your screenshot above to show on the mobile screens with the custom class: hide-on-large and then add this css:

@media only screen and (max-width: 1025px) { 
	#top .hide-on-small {
		display: none;
	}
}
@media only screen and (min-width: 1026px) { 
	#top .hide-on-large {
		display: none;
	}
}

I believe that this will work, and if it does then you can repeat this for your other color sections using the same classes accoss your site.

Best regards,
Mike

Hi,
Well do, to have a burger menu up to 1024px try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 1024px) { 
  #top #header .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header .av-burger-menu-main {
      cursor: pointer;
      display: block!important;
  }
}

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

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike