Portfolio not loading correctly on mobile (iPhone)

We love the portfolio feature of this theme and it all works perfectly on desktop - but in mobile (iPhone 8 plus) the portfolio images won’t load at all on the home page, or if they do, they stack up on top of each other so only the bottom/last image appears.

Our site is https://paradiseridgeretreat.com/

Thank you

Hey there

Is this already fixed? I just tried it on my side and they are working normally for me, can’t see any problem

No - I don’t see anything different than what I previously reported. Portfolio still doesn’t load on home page. It should appear below the black section that says Explore the Property and above the testimonials.

And if you go to this page - the portfolio loads but the images stack on top of each other so all I can see is the last project (laundry room) Projects – Paradise Ridge Retreat

Hey there

Can you please provide a screenshot? this is how it appears for me and as you can see everything is visible:
https://www.loom.com/share/46bd7fc039304233881d42222950baf2

Sure Noda - Here you go:

In this first video linked above, below the black box with Explore The Property, nothing loads for me - even on your video - only two of the 12 portfolio images loaded. (At the bottom, those images you lingered on in the video are an instagram feed via a plugin).

Then on this video: Loom | Free Screen & Video Recording Software
all 12 portfolio images DO load, but they quickly stack on top of each other and you can only click on the final project (Laundry room) - you can see that page here: Projects – Paradise Ridge Retreat

Thanks for your help!

Hi Noda - Do you have a solution for us? Or do I need to find a new theme for our site? I provided the screen shots/loom video you requested.

Hi Noda (or anyone) - Still hoping to get a response…your demo site Portfolio loads fine on my phone…is there an project image size/width limit I should be aware of so it loads correctly?

hello Martha

Sorry for the delay, please take my apologies
Yes, now I see your problem, please add this custom CSS in APpearance > customize > additional CSS:

@media only screen and (max-width: 961px){
.project {
position: relative !important;
top: auto !important;
float: none !important;
}
}

Great - that worked, except now the top cover image (underneath “Learn More” button) isn’t loading on mobile. I don’t believe I saw any max width info for that image in the theme documentation. Is there a max?

Also - there is a lot of dark black spacing below the portfolio images requiring the user to scroll quite a bit to get to the next section on the home page. Anyway to reduce that?

Thanks

I have the same problem
I love the subject and I want to continue using it just help me please with this little detail
Note: it is displayed correctly but only to be recharged after entering for the first time

I’m seeing the top cover image now but still have a large black space below the portfolio on mobile. How can I eliminate/make smaller that extra black area?