Hi Franz,

Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
  .responsive #top .avia-post-nav {
    display: block;
  }
}

Best regards,
Rikard

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,

Great, I’m glad that we could help. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,
Unfortunately the function above doesn’t allow the media queries to work so I can’t add css to make this change only for mobile, I recommend changing your page layout to suit.
You could try creating a second set of elements and use the element visibility options to hide the desktop version and show your new mobile version, but I don’t think this will work because the element visibility options use the same css media queries to work.
So your best option may be to design your page layout with the mobile view in mind and show it the same way for desktop, since above you wrote that 70% of user access is via mobile.

Best regards,
Mike

Hey Blaise,

Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
.page-id-110914 #after_section_1 .content {
  padding-top: 0;
  padding-bottom: 0;
}
}

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

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,

1.) We recommend increasing the font size slightly from the default of 14px. Perhaps 16px or 18px would be ideal, but the choice depends on your preference.

2.) Would you mind providing a screenshot? You can use platforms like Savvyify, Imgur or Dropbox.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hey Renard,

Thank you for the inquiry.

You can add this css code to adjust the size of the tabs and make sure they align properly on smaller screens:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top .av-pill-tabs .av-section-tab-title {
    margin-right: 10px;
    padding: 0 !important;
  }

  .av-pill-tabs .av-inner-tab-title {
    color: #FFFFFF;
    font-size: 0.9em;
    margin-bottom: 0px !important;
    line-height: .5em;
    padding: 8px !important;
  }
}

Best regards,
Ismael

Hi,

On my iPhone the video has NO SOUND AT ALL!

It’s because the video is muted. You can adjust this in the Video element’s Content > Player Settings toggle. Please note that when autoplay is enabled, the theme will automatically mute the video because unmuted autoplay is not allowed (link below). If you prefer your video to remain unmuted, you’ll need to disable the autoplay option and let the users manually play it

// https://developer.chrome.com/blog/autoplay#:~:text=Muted%20autoplay%20is%20always%20allowed,previously%20played%20video%20with%20sound.

Chrome’s autoplay policies are simple:

Muted autoplay is always allowed.
Autoplay with sound is allowed if:
The user has interacted with the domain (click, tap, etc.).
On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.

Best regards,
Ismael

Hey woogie07,

Thank you for the inquiry.

You can add this css code to adjust the style of the slider button:

#top .avia-slideshow-button {
    border-radius: 3px;
    text-transform: uppercase;
    padding: 15px 16px;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 30px;
}

Best regards,
Ismael

Hi,
I was just working on another thread where a similar issue was that the sub-menu and the burger menu were still open when the browser back button was used, this is due to the browser serving a browser cached version of the page. The following javascript solved this in my tests, and while my above solution worked for the custom button issue you are having I thought that perhaps this would be a better solution for you as it will also solve the use of the browser back button, so give this a try instead of the above solutions and see if it works for you. I recommend using the WP Code plugin then add a new snippet, in the top right corner use the javascript snippet as the code type:

and add this code:

window.addEventListener('pageshow', (event) => {
    if (window.matchMedia('(min-width: 990px)').matches) {
        document.querySelectorAll('.sub-menu').forEach((subMenu) => {
            subMenu.style.opacity = '0';
            subMenu.style.visibility = 'hidden';
        });
    } else {
        const overlay = document.querySelector('.av-burger-overlay');
        if (overlay) {
            overlay.style.display = 'none';
            overlay.style.opacity = '0';
        }
        const hamburger = document.querySelector('.av-hamburger');
        if (hamburger) {
            hamburger.classList.remove('is-active');
        }
        document.documentElement.classList.remove('av-burger-overlay-active', 'av-burger-overlay-active-delayed');
    }
});

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Bruno,
Thanks for the screenshots, I tested this on my demo site with Safari on Mac and Firefox on Windows and the sub-menu and the burger menu were open when the browser back button was used, this is due to the browser serving a browser cached version of the page. The following javascript solved this in my tests, I recommend using the WP Code plugin then add a new snippet, in the top right corner use the javascript snippet as the code type:

and add this code:

window.addEventListener('pageshow', (event) => {
    if (window.matchMedia('(min-width: 990px)').matches) {
        document.querySelectorAll('.sub-menu').forEach((subMenu) => {
            subMenu.style.opacity = '0';
            subMenu.style.visibility = 'hidden';
        });
    } else {
        const overlay = document.querySelector('.av-burger-overlay');
        if (overlay) {
            overlay.style.display = 'none';
            overlay.style.opacity = '0';
        }
        const hamburger = document.querySelector('.av-hamburger');
        if (hamburger) {
            hamburger.classList.remove('is-active');
        }
        document.documentElement.classList.remove('av-burger-overlay-active', 'av-burger-overlay-active-delayed');
    }
});

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey KQed0428,
Thanks for the link to your site, but the login doesn’t allow me to add css, so you will need to add this to achieve what you are asking;
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.home .product-sorting {
	display: none;
}
.responsive #top.home #av_section_3 > .container {
	  max-width: 100%;
	  padding: 0;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi NicomIT,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey TBant,
Thank you for your patience, if you are using the masonry gallery with the caption always showing under the image:

and you want to change the background color of the caption, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .main_color .container .av-inner-masonry-content,
#top .main_color .container .av-masonry-entry .avia-arrow {
	background-color: orange;
}

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

Best regards,
Mike