Tagged: animation, fullscreen slider, Masonry Gallery, mobile
-
AuthorPosts
-
March 3, 2018 at 3:10 pm #920818
Hi
2 questions:
1.
I have a fullscreen slider at the top of my pages, which looks very narrow on the mobile.
I don’t see any setting options – I know I can make another element for mobile but shouldn’t it be responsive?
any css you can throw my way?2. on the same page, is there an easy way to have the masonry gallery load on page load instead of on scroll?
thanks
Nancy- This topic was modified 6 years, 8 months ago by Munford.
March 4, 2018 at 1:39 pm #921028Hey Munford,
1. It appears you have not used a slider element please check again and let us know. However, you can use the below CSS.
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .avia-builder-el-1 > .flex_cell_inner { min-height: 200px; } }
2.
To disable the masonry gallery image loading animation please use the below CSS
/* Masonry image load animation*/ .avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{ -webkit-animation: none; /* Safari 4+ */ -moz-animation: none; /* Fx 5+ */ animation: none; /* IE 10+ */ } .av-masonry-entry { opacity: 1 !important; visibility: visible !important; }
Best regards,
VinayMarch 9, 2018 at 1:52 pm #924478thanks – that takes all the animation off.
Is there a way to fade it in?March 10, 2018 at 10:29 pm #925052Hi,
Try instead of animation use
transition: opacity 2s ease-in;which will make it fade in, while the page loads / scrolls to that view.
Best regards,
BasilisMarch 11, 2018 at 11:42 am #925189Not sure how to use that – ??
.avia_desktop .avia_transform3d .av-masonry-entry .av-masonry-item-loaded .av-inner-masonry {
transition: opacity 2s ease-in;
}/* Masonry image load animation*/
.avia_desktop .avia_transform3d .av-masonry-entry .av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: none; /* Safari 4+ */
-moz-animation: none; /* Fx 5+ */
animation: none; /* IE 10+ */
}
.av-masonry-entry {
opacity: 1 !important;
visibility: visible !important;
}March 13, 2018 at 9:39 pm #926262Hi,
Have you added the code?
Try that code please/* Masonry image load animation*/ .avia_desktop .avia_transform3d .av-masonry-entry .av-masonry-item-loaded .av-inner-masonry{ transition: opacity 2s ease-in; -webkit-animation: none; /* Safari 4+ */ -moz-animation: none; /* Fx 5+ */ animation: none; /* IE 10+ */ } .av-masonry-entry { opacity: 1 !important; visibility: visible !important; }
Best regards,
BasilisMarch 14, 2018 at 12:54 am #926352I added that but doesn’t seem to be “easing in” when the page loads.
any ideas?March 15, 2018 at 9:03 am #927140Hi,
One of the custom code added is removing the effect which was there earlier.
Please remove the code and add it back block by block to check which part is causing the issue. You can then remove the block of code which caused this issue and let us know if you need further help.
Best regards,
Vinay -
AuthorPosts
- You must be logged in to reply to this topic.