Sydney Pro and Elementor

My site for SimSof-IT uses Sydney Pro

The home page uses two Elementor elements that are causing slight but annoying problems…

Our services – uses a set of six icon boxes contained within two inner sections.

On Chrome on a pc – the layout is OK.

When you look at it on a mobile phone – the gap between the Networking box and Office 365 & Google Workspace disappears…

What setting could affect this?

2nd issue is the ‘Our Work’ Section

The images are aligned correctly using chrome desktop but when you look at same area on a mobile… the gap between the small business image and Home Offices image disappears.

The site is pretty much taken from the example that is installed with Sydney so I wasn’t expecting this.

Where do I look to resolve this?

Cheers

Andrew

Weirdly when I put the link in the original post it came up as Spam…

company is simof-it and it’s dot com…

agghhh

simsof-it dot com

Hello Andrew,

First thanks for using our Sydney Pro theme!

When you look at it on a mobile phone – the gap between the Networking box and Office 365 & Google Workspace disappears

You need add an extra margin top (25px) in the “Office 365…” column. Like in the image below:

The images are aligned correctly using chrome desktop but when you look at same area on a mobile… the gap between the small business image and Home Offices image disappears.

Please try these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
(function($) {
    if( $('.isotope-container').length ) {
        if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
            $(window).on('load', function(){
                $('.isotope-container').isotope('layout');
            });
        }
    }
})(jQuery);

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi Rodrigo,

Thank you very much for replying.

The first tip worked like a dream but the 2nd one didn’t… I followed your instructions meticulously but it has made no difference. Can you suggest anything? Do you need to take a look?

additionally - in Chrome - you might notice that the WiFi Coverage image is higher than the others. Can this be fixed too?

Cheers

Hello,

Great! We are almost there!

additionally - in Chrome - you might notice that the WiFi Coverage image is higher than the others. Can this be fixed too?

I can see the first column higher than others:

  1. First give a unique class name to the section that wraps the columns in the Elementor (“custom-section-wrapper”):
  2. Add the given custom CSS code below at Appearance > Customize > Additional CSS:

@media only screen and (min-width: 1025px) {
    .custom-section-wrapper .elementor-widget-container,
    .custom-section-wrapper .elementor-element {
    	min-height: 292px;
    }
}


I followed your instructions meticulously but it has made no difference. Can you suggest anything? Do you need to take a look?

Please try with this new code:

(function($) {
    if( $('.isotope-container').length ) {
        if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
            $(window).on('load', function(){
                setTimeout(function(){
                    $('.isotope-container').isotope('layout');
                    $(window).trigger('resize');
                }, 1500);
            });
        }
    }
})(jQuery);

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi

I tried the new code - and no difference still…

I’ll do the other bit and let you know.

Thanks again

Hi

additional css worked - thanks.

It’s just the image gap issue left…

Cheers

Hello,

Great!

Regarding the gap issue, we will need investigate the code directly from your site. Thus I request sharing your website’s temporary admin login link and send it privately to me over email. You can generate the link with this plugin.

P.S.: Ensure the link expiry is set to 7 days and all admin rights are enabled.

Email

rodrigo@athemes.com

Kind Regards,

Rodrigo.

aThemes Support

Hello Andrew,

The main issue was the “lazyload” feature from the Autoptimize plugin you are using, and because of that the code was not working.

I changed the code and now it’s working:

    
(function($) {
  	$(window).on('load', function(){
     	if( $('.isotope-container').length ) {
          	if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

          		$('.isotope-container .project-item img').on('lazyloaded', function(){
					$('.isotope-container').isotope('layout');
				});

          	}
      	}
    });
})(jQuery);
    

We hope this helps!

Let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

Hi, thanks for all your time in sorting this out.

One thing I have noticed is… on desktop chrome, when the home page loads first time the WiFi Coverage image is in the middle of the three and slightly higher… If you refresh the page the WiFi image swaps position with the Home Tech image but they all align correctly. Strange but true…

Also - is Autoptimize the way to go - since it’s caused an issue would you recommend an alternative?

and

Are the tweaks that we’ve had to do to make it work properly compatible with future upgrades of the Sydney Pro theme and Elementor?

Cheers

Andrew

Hello Andrew,

Great!

If you refresh the page the WiFi image swaps position with the Home Tech image but they all align correctly. Strange but true…

That’s probably because the Wi-fi image is with different size from the others images.

Please try changing the original image size to 800x561 (with a image software editor like Photoshop or any other).

Also - is Autoptimize the way to go - since it’s caused an issue would you recommend an alternative?

The Autoptimize is a good way to go, you can continue using it. At really this is something we can improve in the Sydney making the theme more compatible with Lazy Load. I will talk with developers about that.

Are the tweaks that we’ve had to do to make it work properly compatible with future upgrades of the Sydney Pro theme and Elementor?

Yes. These tweaks will be compatible, no worries about that.

We hope this helps!

Let us know if you have more questions.

Kind Regards,

Rodrigo.

aThemes Support

Hi

I’m not so sure. I deleted the image and reloaded (800x561) and placed on the end of the row. The middle image (home tech) is raised - a refresh corrects things.

What do you think?

Hello Andrew,

This is related to the same issue with Lazy Load.

I did a change in the code at your Dashboard in Appearance > Custom Javascript to:

(function($) {
  	$(window).on('load', function(){
     	if( $('.isotope-container').length ) {

            $('.isotope-container .project-item img').on('lazyloaded', function(){
                $('.isotope-container').isotope('layout');
            });

      	}
    });
})(jQuery);

Note I removed the condition that was applying the code only for mobile devices.

We hope this helps!

Let me know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support