Header / slider images are blurred on mobile devices
Permalink Browser Info Environment
Have you ever noticed that the header / slider images are totally blurry in mobile (smart phone, tablet) mode? I tested it with different formats (jpg, png, webp). It can also be seen in the demo.
| Type: | Discussion |
|---|---|
| Status: | Resolved |
Hi,
The blurred image is caused by a normal behavior of Concrete CMS thumbnails system.
Which makes images smaller in small devices.
You can reduce the blurriness by making a CSS override in theme customizer.
The blurred image is caused by a normal behavior of Concrete CMS thumbnails system.
Which makes images smaller in small devices.
You can reduce the blurriness by making a CSS override in theme customizer.
@media (max-width: 991.98px) { div.ccm-page .ccm-image-slider-container .ccm-image-slider .ccm-image-slider-inner .rslides img { -o-object-fit: initial; object-fit: initial; } }
Hi, thanks for the code. Unfortunately it has no effect. With the basic slider, the images are stretched. I tried "Atomik" on another project, everything is fine there. I'm at a loss.
Any news?
I am currently rebuilding the website. If I don't know if the problem can be solved, I can't continue, otherwise I'll have to use another theme. But what I don't want.
I am currently rebuilding the website. If I don't know if the problem can be solved, I can't continue, otherwise I'll have to use another theme. But what I don't want.
Hi,
Here is a different approach to fix the issue:
move the attached file "view.php" (inside view.zip) under packages/xw_replica_pro/themes/xw_replica_pro/blocks/image_slider
clear your cache and try again.
PS: if you are using "Classy Slider" template and you are facing the same issue please edit the
packages/xw_replica_pro/themes/xw_replica_pro/blocks/image_slider/tempaltes/classy_slider.php file and replace the line 56
with this code:
Don't forget to:
1 - Remove the introduced css code in the first proposed fix:
2 -Clear your cache after the changes.
Here is a different approach to fix the issue:
move the attached file "view.php" (inside view.zip) under packages/xw_replica_pro/themes/xw_replica_pro/blocks/image_slider
clear your cache and try again.
PS: if you are using "Classy Slider" template and you are facing the same issue please edit the
packages/xw_replica_pro/themes/xw_replica_pro/blocks/image_slider/tempaltes/classy_slider.php file and replace the line 56
with this code:
$tag = $app->make('html/image', ['f' => $f, 'options' => false])->getTag();
Don't forget to:
1 - Remove the introduced css code in the first proposed fix:
@media (max-width: 991.98px) { div.ccm-page .ccm-image-slider-container .ccm-image-slider .ccm-image-slider-inner .rslides img { -o-object-fit: initial; object-fit: initial; } }
2 -Clear your cache after the changes.
Thank you for your quick response! But where can I find the attachment (zip file)?
It seems that something unexpected happened!
You can access to the file in this reply
You can access to the file in this reply
Yes, now it works fine. Many thanks for your support!
We will investigate the issue and give you a feedback as soon as possible.
Kind Regards
Xanweb Support Team.