Hi,
Sorry, did you find that the highlighting is working correctly now?
The other css is in place and looks like it is working, please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
Thank you for pointing that out,🤦‍♂️ so considering the difference between your homepage & your test page I removed the code block contents at the bottom of the page which is an iframe for google maps? This restored all of the images.
I added it back for you to review, please try removing it and checking the code.

Best regards,
Mike

Hi,
Thank you, I adjusted, please clear your browser cache and check.

Best regards,
Mike

Hi,
We will leave this open to hear back from you.

Best regards,
Mike

Hi,
Glad we were able to help, 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 in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the login, I checked your page on Windows 10 Chrome, Firefox, Edge, and on Mac Safari & Chrome, but the image “TTG-slogan-TTG-2021_2-833×1030.png” (glass 2021) image shows for me.
My first thought was that you had Lazy Loading enabled in the theme settings and was also using a plugin for Lazy Loading, but I don’t see that is true, and since I see the images it must be something else.
Do you still see this error? What OS & browser are you using?

Best regards,
Mike

Hi,
Sorry for the very late reply and thanks for the link to your page. So for tablet we can remove the page padding and the margin & padding for the image to make it as large as possible, but the element is a 1/2 column.
For the icon box text, one way to to increase the width is to hide the icon for tablet which removes the indent making the text wider, but I don’t know if the icon is important for you to show on tablet. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (min-width: 768px) and (max-width: 1024px) { 
	#top.page-id-4188 #av_section_2 > div.container {
		padding: 0 !important;
	}
	#top.page-id-4188 #av_section_2 > div.container > div > div > div > div > article > div.iconbox_icon.heading-color {
		display: none !important;
	}
	#top.page-id-4188 #av_section_2 > div.container > div > div > div > div {
		margin-left: 0 !important;
		width: 49% !important;
	}
}

After applying the css, please clear your browser cache and check. Please see the link in the Private Content area for the expected results. From the screenshot you should see that there is not enough room for the image to be the same size as the icon box text.
Please note this css will only work for your test page.
Another option is to change the element layout for tablets by adding a new section that works for your thoughts on tablet and then hide / show the elements based on screen size. Let us know if this is something you would like to try.

Best regards,
Mike

Hi,

@win90 sorry for the late reply and thanks for the login. So since your slides contain text in the image that you want to show we will need to make the background image either “contain” or “cover” for mobile & tablet, but because of the portrait orientation of these devices the background height also needs to be adjusted so the full width of the image will show.
So, I removed your above css and added this to your Quick CSS:

@media only screen and (max-width: 1025px) {
.avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] > ul > li {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
}
@media only screen and (max-width: 330px) { 
.avia-builder-el-0.avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] {
    height: 190px !important;
}
}
@media only screen and (min-width: 331px) and (max-width: 385px) { 
.avia-builder-el-0.avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] {
    height: 200px !important;
}
}
@media only screen and (min-width: 386px) and (max-width: 435px) { 
.avia-builder-el-0.avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] {
    height: 260px !important;
}
}
@media only screen and (min-width: 436px) and (max-width: 770px) { 
.avia-builder-el-0.avia-fullscreen-slider .avia-slideshow[data-image_attachment="fixed"] {
    height: 480px !important;
}
}

This css covers the most common 3 phone sizes & 2 tablet sizes, please clear your browser cache and check.

@Steve from your HTML copy it looks like this css would correct, I’m not sure why this would occur, perhaps some css conflict, but give this a try:

#main > div.main_color.container_wrap_first.container_wrap.fullsize > div {
	max-width: 100% !important;
	padding: 0 !important;
}
#main > div.main_color.container_wrap_first.container_wrap.fullsize > div > .content {
	padding: 0 !important;
}

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

Best regards,
Mike

Hi,
How do you mean that you can’t open a new thread?
I tested your contact form and it seems to work correctly, at least I got a “sent successfully” message:

I could not login as an admin as it seems to have expired. Is this a new error sense you have updated? Please explain further.

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the login, I didn’t see Victoria’s css for your hover effect in the Quick CSS so I added it and it seems to work correctly, please clear your browser cache and check that this is the effect you wish for.

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the login, the reason the font-weight looks different is because on your homepage the css loading for the Montserrat font is this one
family=Montserrat:regular,700&subset=latin%2Clatin-ext
that contains this code for Montserrat-Bold, which is different than Montserrat

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

this is loaded by the layerslider due to the font choice in the layers which is overriding the default one:
family=Lato:300,400,700%7CMontserrat
I added the css above to your WordPress > Customize > Additional CSS field and now your inner pages look like your homepage.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
I added this css to adjust the background image size and position for the iPad, please clear your browser cache and check.

@media only screen and (min-width: 768px) and (min-width: 1024px) and (orientation : portrait) { 
	#top.home #av_section_1 > .avia-full-stretch {
    background-size: contain !important;
    background-color: #001636;
    background-position: 0 70% !important;
} 
}
@media only screen and (min-width: 768px) and (min-width: 1366px) and (orientation : landscape) { 
	#top.home #av_section_1 > .avia-full-stretch {
    background-size: contain !important;
    background-color: #001636;
    background-position: 0 90% !important;
} 
}

The looping is set in the gif image, you can change the loop count with an online editor or with the tool you used to create the gif.
The gif loops for me on desktop with a pause between loops

Best regards,
Mike

Hi,
Thank you for the login and link to your site, I first deactivated the Enfold Theme Options > General Layout > Sticky Sidebar menu option:

then I added this code to the end of your functions.php file in Appearance > Editor:

function custom_sidebar_header_sticky(){
  ?>
  <script>
(function ($) {
  $(window).scroll(function (e) {
    var $sticky = $('.html_header_sidebar #top #header');
    var width = $(window).width()
    var position = ($sticky.css('position') == 'fixed');
    if ($(this).scrollTop() > 100 && width >= 767 && !position) {
      $sticky.css({ 'position': 'fixed', 'top': '-100px' });
      $sticky.next().css('float', 'right');
      $sticky.addClass('fixed_element_style');
    }
    if ($(this).scrollTop() < 100 && position) {
      $sticky.css({ 'position': 'absolute', 'top': '0px' });
      $sticky.removeClass('fixed_element_style');
    }
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_sidebar_header_sticky');

and now in my test the sidebar header now allows enough scroll to show the mail social button for “tablet” & “desktop”
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, I understand but I’m not experiencing this, I tested with Chrome on Windows & Mac, please see the video in the Private Content area.
Did you try an incognito window and clearing your cache?
I’m using:
Chrome Version 86.0.4240.75 (Official Build) (64-bit)

One possible solution would be to change the code above to use “opacity” instead of “display”, but I would prefer to recreate your error to ensure it’s not just you if that makes sense.

Best regards,
Mike

Hi,
While reporting this I found that If the portfolio grid is replaced with another element, such as the masonry element, or if the 3/5 column that the portfolio grid is inside of is changed to full width, or if the column is removed the menu highlighting works correctly. So it seems to be related to the element nested inside of the column, anyways I will report back after the dev team checks.

Best regards,
Mike