Mobile issues

this same issue also happens on Internet Explorer

It’s interesting that this appears to be happening so inconsistently (I wasn’t able to reproduce here on either desktop or mobile, although I don’t have an iphone handy.

I’m curious, are there any issues on the effected devices with images that aren’t displayed using the slick slider you’ve implemented? I’m wondering if something in the javascript could be failing/not loading on some connections.

Hey Chad, I’m glad you weren’t able to reproduce it because it means what I did worked ?? I read some other topics in this forum and one of them said it could be related to the Photon module on Jetpack, so I disabled that and voilà! ??
I’m still having a few inconsistencies (the logo is always cropped wrongly even though I chose the recommended size, for instance – it seems to be an issue related to the responsiveness of the website, also on Safari the “torsos” project thumbnail doesn’t appear) but this one was by far the worst of them.
I’m now struggling with speed since the images are taking too long to load. If you have any tips on that I’d appreciate it ??

Great minds think alike, I’d wondered if you had photon active and checked that when I first loaded your site. I must have gotten there after you made that change ??

Interesting that turned out to be the trigger – you might want to check in with the Jetpack support team about the images skewing with photon active.

This page has some Photon info, as well as a contact link in the sidebar if you need it ??
https://jetpack.com/support/photon/

Ironically, my first recommendation with slow image loading would be to activate photon, as it can speed things up drastically. I’ve just clicked around the site a bit in both normal browsing and in a private window so I could see if my local cache was impacting – good news is the images currently load right up for me, no delay at all.

If you’re having a lot of trouble with image loading speeds, it’s possibly connection or hosting related. You could look into those aspects of your setup, or you could try getting photon up and running again (or look into other CDN options).

The Torsos image is particularly odd – have you tried clearing the cache on the device that isn’t loading that image?

the logo is always cropped wrongly even though I chose the recommended size

This is also working well for me – When I test different screen sizes the logo doesn’t get cropped at all (perhaps you’e made a change here as well ?? )

The issue here is that the header where you have the logo uses it as a background image set to background-size: cover in the CSS.

The aspect ratio of the header section changes from one screen to the next (the height remains static even as the width decreases) so parts of the image will sometimes extend beyond the visible area. The recommended image size is one that will allow the image to cover the header on the widest range of devices possible.

It works really well with background style headers, but can sometimes have issues with logo or text based ones.

Possible workarounds: use a nice wide image and experiment with different aspect ratios. You can also modify your CSS to change how the header behaves:

.site-branding {
    background-size: contain;
    background-color: #fff;
}

Since you have a white based logo, that should blend nicely when you change the background color behind the image ??

Hey Chad, thank you so much for taking the time to answer me ?? I’m glad to know the images didn’t take long to load. My client was complaining about that, but then again, it could be a million things, such as his Internet link, which I know for a fact can be slow at times. I tested at my office, in my home, and also at a friend’s office, besides my mobile phone and friends phones, and the loading time was nothing unnatural. ??

I’ll try the

`.site-branding {
background-size: contain;
background-color: #fff;
}

workaround. I’ve read in a few other topics here that one should never edit the original theme file, but rather use a Custom CSS Plugin or a Child Theme. I’m a newbie (as you have probably noticed) so sorry about the stupid question, but I just have to copy that code into my Custom CSS Plugin (I’m currently using the Custom CSS function built in Jetpack, which opens in the Appearance section) to get the result?

Thank you once again for your kindness =)

Not a stupid question at all!

You are 100% correct about not wanting to edit your theme files directly – doing that will result in your changes being lost the next time the theme is updated.

For CSS you can use the Additional CSS panel in the Customizer (assuming you’re running at least WordPress 4.7) or with something like the Jetpack Plugin using the Custom CSS Module, as you’ve already described.

For more involved changes, a child theme is the way to go ??

THAT WORKED!!! ??
thank you!!

You’re welcome! ??