hello everybody.
i have a wordpress theme called fortuna, you can see the demo i’m using here : blueowlcreative.com/wp/fortuna/home-page/
in the normal desktop mode, every section loads with specific animation like “from bottom to top” and etc. but in the responsive mode and mobile size, these animations are disabled. how can i enable them in the mobile size ?
this is the responsive file for my site :
responsive.css (11.7 KB)
any help will be appreciated !
In you css file, you specify that the animations are only to work when the screen is 769 pixels width or larger:
@media only screen and (min-width: 769px)
For smaller screens, you have left the @media css blank, meaning that the above content will not work below its size:
@media only screen and (max-width: 768px) {
}
If you want the full screen to work on smaller screens as well, with no modifications, then change the min-width: 769px to something mobile sized and drop the last @media query.
yeah! thank you! that problem is solved, now i have a new one! in some sections(like i mentioned in picture), it took too long to load the animation … i need to scroll the whole website and then go back and see the that section is loaded. see this picture :
its for this website, you can see the live demo here :
http://elin-home.ir/
That page is huge; it’s no wonder it’s slow to load.
Are all those styles actually in use, or can you remove unused styles to reduce the size of the documents? Also try to combine stylesheets, to make fewer server requests; likewise for the scripts.
Also, how large in pixel size are these images? They may need to be drastically minified to load faster.
In addition, the CSS states that the images are to load as the page brings them into view, right? So there is a built-in pause as they show.
Keep these resources on hand:
Code minification/compression (for large files)
• CSS minimize/optimize: http://cssminifier.com/ , http://dataurl.net/#cssoptimizer
• HTML minimize: http://htmlcompressor.com/compressor/
• JS minimize: http://javascript-minifier.com/ , http://closure-compiler.appspot.com/home
• Remove unused CSS: https://unused-css.com/
Image optimization
• Generate app icons: http://makeappicon.com/
• Bulk compress png & jpg: https://tinypng.com/
• Compress pdf: Acrobat - 1) Examine Doc. 2) Reduce File Size. 3) Extend Features.
• Compress gif: http://ezgif.com/optimize
• Use Data URLs? http://boazsender.github.io/datauri/
• If vector, convert to SVG? (Convert in Illustrator) http://online-converting.com/image/convert-to-svg/
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
