Portfolio widget requires screen rotate on mobile / resize on desktop

Shapely
1

Hello, I have 3 portfolio widgets on my homepage. The 2nd and 3rd work without problem. The 1st one, is empty on mobile and only shows once the screen is rotated to landscape. When rotated back, the items are stacked on top of eachother. On desktop, the items show, but have a gap. Resizing the window fixes the issue. If I reorder them, whichever is the 1st will show the problem.

How can I fix? Thanks!

http://mediasaurus.net

2

Hey there

Sorry, but looks like you made some changes to the site? because I see more than 3 portfolios, can you please update this ticket? also, please post a screenshot of the problem for better reference

3

I have not made changes to the site since posting and have not modified the theme’s code. The three sections are called “Commercials”, “Music Videos” and “VFX Breakdowns”. I have tested on Chrome (Linux/Mac/Windows), Safari, and Microsoft Edge for desktop. Tested on Android for mobile.

Screenshots

  • 3 screenshots for desktop (site is too long for one screenshot)
  • 3 screenshots for mobile (site is too long for one screenshot)
  • 1 screenshot for mobile for Commercial section after I rotate phone and rotate back (items on top of eachother)

All CSS I’ve added:
.shapely_home_parallax h1 {
font-size: 60px;
}
.shapely_home_parallax p {
font-size: 30px;
}

.header-callout {
display: none;
}’

.footer-credits {
display: none;
}

#site-navigation .search-widget-handle {
display: none;
}

.footer-credits {
display: none;
}

(had to do footer-credits twice otherwise the #site-navigation cancelled it out for some reason)

4

Hey there

Sorry for the delay, please try this code and let me know results:

@media (max-width: 991px){
.project .image-tile img {
    min-height: 307px;
}
}

Thanks

5

Thank you so much for the response.

I added the CSS. It doesn’t appear to fix the problem.

On desktop:
There is still an intial gap between the first and second row of thumbnails in the first portfolio (commercials).

On mobile:
The thumbnails still don’t appear in the first portfolio (commercials) until I rotate the phone. The thumbnails now have a stretched aspect ratio (they should be 16:9). The one improvement is the thumbnails no longer stack on top of each other when rotating back to vertical.

Any ideas are greatly appreciated. Thanks!

6

Any idea how to fix?

7

Hi there

Looks like checking several things in the backend is necessary, please send me your access credentials along with your website URL and I will investigate this case.

Don’t forget to mark your reply as private!

Thanks!
Colorlib Support Team

8

(baseurl)/wp/wp-admin/
Spam filter is flagging when I list the entire url.

admin
#uK*Eqg6XF4$6RpB7Xp$RbD1bCGpIMtI

Thank you!

9

Any luck?

10

Hi

Sorry for the delay, I just added this css code in the appearance > customize additional css:

.masonryFlyIn .masonry-item {
position: relative !important;
top: auto !important;
left: auto !important;
}

It should be fixed now

11

This seems to have fixed it. Thanks!

12

Very nice to hear :slight_smile:

I will close this case now, Feel free to contact us again if you have other questions

Thanks!