Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Images not shown at mobile after first load

Started by Holger Altwein 5 years ago · 2 replies · 539 views

5 years ago

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

5 years ago

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|690x373

(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

last edited 06/03/21 by Spam Hater

pamtbaau

Grav Forum Moderators Legend First Post Conversation Starter Well Liked 3127 posts

5 years ago

@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.

last edited 06/03/21 by pamtbaau

Topic	Replies	Views	Activity
Well done Grav Team General · by Jerry Hunt, 4 days ago	2	80	9 hours ago
Grav 2, Admin Next, API and Migrate are now in production! General · by pamtbaau, 15 hours ago	1	51	14 hours ago
Welcome to the new Grav Forums! General · by Andy Miller, 1 day ago	0	45	1 day ago
How active is Grav? General · by Marcel, 12 months ago	6	346	5 days ago
Contents in bin folder delete itself during core updates General · by Duc , 5 days ago	3	40	5 days ago

Suggested topics