Images not shown at mobile after first load


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

My system yaml
alias: ‘/blog’

force_ssl: false

theme: receptar
markdown: true
twig: false
extra: true

- de
include_default_lang: false

http_accept_language: true
include_lang: true
include_route: false
session_store_active: false

enabled: true
method: file
driver: auto
prefix: ‘g’
gzip: true
allow_webserver_gzip: true

cache: true
debug: true
auto_reload: true
autoescape: false

css_pipeline: true
css_minify: true
css_rewrite: true
js_pipeline: false
js_minify: true

enabled: false
twig: true
close_connection: true

session.enabled: true
session.initialize: false

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 srcset.
  • 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 defer.
  • 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.
1 Like