Images not shown at mobile after first load

1

Hi,

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
home:
alias: ‘/blog’

force_ssl: false

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

languages:
supported:
- de
include_default_lang: false

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

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

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

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

debugger:
enabled: false
twig: true
shutdown:
close_connection: true

system:
session.enabled: true
session.initialize: false

2

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

image
image1920×1040 86 KB

(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

HTH

3

@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:
    mobile
  • 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