Hi,
I added a custom class to your red book icons “red-book” so that it will be easier to control. I then added this css for mobile devices:

@media only screen and (max-width: 767px) { 
.red-book {
margin-top: 20% !important;
}
}

But I have a question about these two icons, so there are two of them but the right one is off the screen until 1130px, so it is not showing for mobile or tablet. Did you want it to show? For desktop when they both show they seem a little off, that is not quite on the sides of the heading but also not quite under the heading. Please see the screenshot in Private Content area. Is this how it looks to you?

For the heading font size to be smaller on mobile I have added this css:

@media only screen and (max-width: 767px) {
#top #wrap_all .av-layout-grid-container .av-inherit-size .av-special-heading-tag {
    font-size: 0.6em !important; 
}
}

The size was “0.8em” and the code above sets it to “0.6em” please feel free to adjust if you wish.
I didn’t see a red margin or a overlap, so I’m not sure what your last question was, please explain.

Best regards,
Mike

Hi,
Do you mean that you installed the demos 20 times on this server with no trouble until now?
If so this sounds like your webhost is blocking you, perhaps you should ask them to look into this, you may have triggered a firewall or ModSec filter.
You can find the import xml file in your install at: \enfold\includes\admin\demo_files\hotel.xml
and use the WordPress importer to import it.
I have also included the images for the demo in the Private Content area. If you continue to have trouble, one tip that I might suggest is uploading the images within their folders to your uploads folder, then editing the hotel.xml to replace all of the url’s that point to our server with your own url. This will set the correct image files in your database without having to actually download them. This method has helped other users that were having troubles with their own server flagging the bulk downloads.
Don’t forget to use the “WP Reset” plugin before trying to import the demo.

Best regards,
Mike

Hi,
Thank you for the login, I added this css to your WordPress > Customize > Additional CSS:

#top.single.no_sidebar_border .container_wrap.fullsize p {
font-size: 17px !important;
}

I found that added the css to your Enfold Theme Options > General Styling > Quick CSS field it didn’t seem to work correctly and I believe this is because you have this function in your Quick CSS field:

add_filter('avia_masonry_entries_query','avia_masonry_entries_query_mod', 10, 2);
function avia_masonry_entries_query_mod($query, $params)
{
    if(is_singular('post')) {
        $query['post__not_in'] = array(avia_get_the_ID());
    }
    return $query;
}

This function will not work correctly there, it belongs in your functions.php file in Appearance > Editor
For it to work you may wish to move it.
Please clear your browser cache and check the font size issue.

Best regards,
Mike

Hi,
Glad to hear, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Glad we could help, this was only a partial of the next update :)
Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hey darkfashion,
Thank you for the image, are the icons also links?
Have you considered using the social media options to add your custom icons and links, after they are in place we could move one to the right?

Best regards,
Mike

Hey NMDKDesign,
Sure, can you tell us what code you are using and what it is targeting so we can try, if it fails we can examine the reason.
Please include a admin login in the Private Content area.

Best regards,
Mike

Hey Munford,
Sorry for the late reply, I was able to see the issue on your homepage, I also saw that you have many javascript errors:

Uncaught TypeError: Cannot read property 'ready' of undefined
    at l (froogaloop2.min.js:1)

this seems related to your video header.
typically when javascript gives an error it doesn’t skip to the next command easily, it will often hang on the error.
Perhaps correcting the errors will help.

Best regards,
Mike

Hey codecreative,
Try adding this code to the end of your functions.php file in Appearance > Editor:

function avia_image_nofollow(){
?>
 <script>
jQuery(window).load(function(){
jQuery('.page-id-743 a.avia_image').attr('rel','nofollow');
});
</script>
<?php
}
add_action('wp_footer', 'avia_image_nofollow');

Best regards,
Mike

Hey JMDP,
For your mobile devices, please try this css:

@media only screen and (max-width: 767px) { 
#top #visuel-home {
background-image: url(https://your-site.com/wp-content/uploads/2019/03/Affiche-IronManech-2019-5e-Edition.png) !important; 
}
}

Please besure to change the “your-site.com” in the code to your site.
Your desktop image looks fine at 1200px and above, but I would recommend creating a third image for tablets 768px to 1200px

Best regards,
Mike

Hi,
Did you remove the css from your Quick CSS or from your style.css? It is still showing in your merged css.
Please disable performance css merging, then go to your Quick CSS and add a blank space and save again.
If it didn’t have the !important; we could override it, but we need to remove it.

Best regards,
Mike

Hi,
Well your saying that you don’t see the error on the frontend but only in the backend (preview), I’m still seeing it on the frontend.
I see that you are using Cloudflare, I believe that is where the cache issue is right now, I assume you tried to clear it but it can take a few hours for it to clear.
Odd that you didn’t see this on the backend before, above you said that you only saw it on the front end?
Perhaps try checking back in a little bit.

Best regards,
Mike

Hi,
Ok I tested on a Mac and adjusted the css to this:

@media only screen and (min-width: 767px) and (max-width: 1400px) { 
span.avia-menu-text {
font-size: 50% !important;
}
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
I added the style to the page directly because it’s loading in a iframe and some browsers won’t let you apply css to the content of a iframe, I also wanted to see if it worked without fighting with the iframe limitations. So I added a media query to the css and made it a little smaller:

@media only screen and (max-width: 767px) { 
.responsive .boxed#top {
max-width: 350px !important; 
width: 350px !important;
}
}

If this works for you then try moving it to your Quick CSS to see if it still works on the iframe, but we will add the page id to it:

@media only screen and (max-width: 767px) { 
.responsive .boxed#top.page-id-1507 {
max-width: 350px !important; 
width: 350px !important;
}
}

Please feel free to adjust the width, I’m just guessing at 350px from the video.
Also clear your browser cache.

Best regards,
Mike

Hi,
Thanks for the test page, the first step was to wrap the css in the code block with:

<style> ... </style>

so it would work as css, then the column needed to have the custom class “test_section” so the css could tell it what to do.
Please clear your browser cache and check.

Best regards,
Mike