1. My fullscreen parallax image is not responsive and does not scale well
2. How do I upgrade the theme? Will I lose all my changes?
3. How can I add my own custom icons/fonts to the theme?
4. What should be the 'standard size' for images?
5. How to optimise the speed of my website?
1. My fullscreen parallax image is not responsive and does not scale well
When the browser displays a fullscreen image will do so taking three factors in account:
- display resolution (width and height)
- display mode (portrait or landscape)
- image aspect ratio (width vs height)
So to display using the current resolution and display mode and preserving the aspect ratio, the browser will crop the image: in portrait will preserve the height whereas in landscape mode will preserve the width, cropping the rest that does not fit in current res.
The attached images visually explains the cropping process.
2. How do I upgrade the theme? Will I lose all my changes?
To upgrade the theme:
Download the latest version from envato (installable Wordpress file)
In admin dashboard:
remove the old theme and install the new version
using FTP remove the theme folder from /wp-content/themes/ and then copy the new version
You will not lose the changes if you added content, uploaded media or changed theme/page options.
if you haven't modified the theme files you should be fine.
3. How can I add my own custom icons/fonts to the theme?
Try uploading the files somewhere as a subfolder of the theme and then use @font-face to create a font family.
And then simply add the font-family style for each element you want to have that font.
To check which images slow down the site. If you go to chrome, and right click and the 'Inspect' you will see a 'Network' tab which helps you monitor the loading time for all elements.
Click on the 'time' column to sort the entries.
Second you can use one of the WordPress cache plugins to deliver cached content:
