I installed GRAV with the skeleton “Receptar Site”. No additional Plugins.
On PC and tablet, everything works like a charm, but at mobile the blog overview page are not showing the images of the blog pages (only white space). Only after reloading, images are visible. But hero image is everytime visible.
Has anybody an idea to solve the problem?
URL is https://www.creativeheart-hochzeitsfotografie.de/
My system yaml
Hi @Dertyp I just checked out your link in a web browser, where I sized the window to be responsive and also then used google chrome dev tools and used the mobile size, everything is working as should be.
I then tried on my iphone 6s and everything seems to working.
What browser is your mobile using ? It may be a responsive browser issue.
First steps things to do if it just the mobile is to clear/clean your mobile browser cache and , try and then view and see if the problem still occurs.
If you can do the following steps and report back and we can take it from there.
There is a few particular layout issues (oversized for mobile view) on the Datenschutz page tho, you might need to edit the responsive css which the theme offers
(Alter style.css , probably check the responsive and headings styles. It is quite an old theme and imported from wordpress, so may need a few tweaks
@DerTyp, I can reproduce the behaviour you are observing when using Chrome/Android.
It works fine in Chrome on the desktop, also when emulating a mobile phone.
I’ve taken a look at your website but don’t see anything suspicious. There are however quite a few areas that could be improved, but, imho, this is not related to your issue.
Areas of improvement:
- I would suggest to run Lighthouse in Chrome. It will give you a host of suggestions to improve your site.
Here are some results for a mobile device:
- The header images have a width/height of 1920x640. Which is quite big for mobile… You might want to consider to load different sized images for desktop and mobile using
- All images could benefit from a proper height/width attribute.
- All scripts are loading inside <head> and are blocking rendering. They could/should be loaded using
- jQuery is outdated.
- Stylesheet could be split into ‘critical’ and ‘non-critical’ css, whereby ‘critical’ could be loaded inline and ‘non-critical’ could be loaded ‘async’ at the bottom of the page.