Hi there
in mobile portrait view the images are cut (the width ist to small and the Image is cut on the left and right side) and I'd like to optimize this.
Is there any possibility to scale this with css optimization or something else, so that this looks nice?
in landscape view everything is allright
Hello Mario,
Thanks for reaching out to us.
On mobile (especially portrait view), images often appear cut because the slideshow and background sections are designed to maintain their aspect ratio. Images that fit well on larger screens may not scale proportionally on smaller ones, which results in cropping on the left and right sides.
To fix this, you can upload separate mobile-optimized images that fit better on smaller screens. This will ensure the layout looks correct in portrait view.
Landscape view appears fine because the aspect ratio is wider, closer to desktop dimensions.
Thanks!
Thank you for feedback but where can select/insert mobile-optimized images ?
Espacially if the Picture is in Menu - Helix 3 Page Title - Background Image
I even did not find the posibillity to add mobile-optimized pictures in full witdh slideshow in the items.
There only one Picture can be selected
Please help me solving this issue (perhaps with customized css?? )
You need to do that using custom css, It would be like this: First upload your images on your media manager and copy the image link.
Then use it here:
@media (max-width: 575px){
.itemid-905 .sp-page-title{
background-image: url(/RAkk/images/demo/Fachgebiete/1000_F_1041242543_Ehe.jpg#joomlaImage://local-images/demo/Fachgebiete/1000_F_1041242543_Ehe.jpg?width=1000&height=560) !important;
}
}N.B.: itemid-905 is your page selector.
Also, here in url() add your copied image path.
Thanks
Thank you Ziaul Kabir, this seems to work but what css do i have to use if i d like to do the same with Slideshow Images where slideshow full with pics are used
This isn’t possible for slideshows. Full-width slideshows are already designed to be responsive automatically.
Thanks.