Hi,
Glad to hear you have it sorted out, shall we close this then?

Best regards,
Mike

Hi,
Ok, Ordering Flex Items is what you are trying to do, there are a couple of different “flex” options depending on the elements and their order. This guide might help visualize how flex works. Here is a video called: Change the order of columns for mobile devices on WordPress with CSS

But if you include the URL to the page in question I can offer advice on getting this to work for you.

Best regards,
Mike

Hi,
Sure, please check the admin login, it’s not working for me.

Best regards,
Mike

Hi,
Thanks for the login, I added the css I posted above to your WordPress > Customize > Additional CSS and the blue focus is now not showing in Safari or Chrome on Mac, please see the screenshot in Private Content area.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the image, I see it is important for the text to be on top of the overlay, is there any on-hover action?
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.page-id-3906 .flex_cell .overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  position: absolute;
  z-index: 0;
}
#top.page-id-3906 .flex_cell .flex_cell_inner {
	z-index: 10;
    position: relative;
}
#top.page-id-3906 .flex_cell.avia-link-column.avia-link-column-hover {
    opacity: 1;
}
#top.page-id-3906 .flex_cell.avia-link-column.avia-link-column-hover:hover {
    opacity: 1 !important; 
}

Then add this code to the end of your functions.php file in Appearance > Editor:

function custom_overlay_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
$('#top.page-id-3906 .flex_cell').prepend('<div class="overlay"></div>');
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_overlay_script');

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

Best regards,
Mike

Hi,
I found that the apostrophe in your language caused the shortcode to break so the shortcode showed the default label.
I changed the label from this: label='Scarica l'eBook GRATUITO' to this: label='Scarica l'eBook GRATUITO' and it is working now, please clear your browser cache and check.

Best regards,
Mike

Hi,
Please include an admin login in the Private Content area, using the css I posted above to remove the blue focus is working for me, it sounds like you are having a caching issue.
While you are building your site I recommend disabling all caching plugins and the Enfold Theme Options > Performance > JS & CSS file merging and compression option, once your site is done you can activate your caching.

Best regards,
Mike

Hi,
That is accomplished with css, for the layout you described above you probably find that if the middle image and text were flipped the whole page would be fine. So if you add a custom ID to this section and use the following css the image and text should be flipped. If not, then please link to the section so we can modify.

@media only screen and (max-width: 767px)  {
#custom-id .entry-content-wrapper {
    display: flex !important;
    flex-direction: column-reverse;
  }
}

Best regards,
Mike

Hey qwerty94,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#menu-item-10921 > div.avia_mega_div.avia_mega1.three.units {
	    left: 10px !important; 
}

Best regards,
Mike

Hey marmat84,
Thanks for the login, I took a look at your posts and you only have one published post that was created with the Advanced Layout Builder, for these, you have to manually add the social share buttons with the “social share buttons” element.

Best regards,
Mike

Hey timjohnson555,
Please include a link to your site so we can investigate, an admin login in the Private Content area could also help.

Best regards,
Mike

Hey jougr,
Typically you can make any element sticky with this plugin or you can try following the steps in this post

Best regards,
Mike

Hey CharlieTh,
Thank you, To add screenshots please try using https://savvyify.com/img/ and pasting the image URL in your post.

Best regards,
Mike

Hey fcp,
To increase the space between product price and product counter, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.single-product-summary form.cart {
	 padding-top: 20px !important; 
}

To make the product counter and the Add To Cart button a little bit smaller, try this css:

#top div.single-product-summary .quantity input.plus, #top div.single-product-summary .quantity input.minus,#top div.single-product-summary .quantity input.qty {
    line-height: 21px !important; 
    width: 23px !important; 
    height: 23px !important; 
}
#top div.single-product-summary button[name=add-to-cart] {
    padding: 5px !important; 
}
div.single-product-summary form.cart div.quantity {
    min-width: 50px !important; 
}

Feel free to adjust to suit.

Best regards,
Mike

Hi,
Since you are using the Classic Editor for your page I assume that you are also using the “shortcode wand” to create the buttons, I created a button for you and the button label was correct “Nuovo pulsante”

You can also edit the label after the button is added directly in the HTML:

this is what I did to create the second button on your page.

Best regards,
Mike