1. herkenrath
  2. Commercial Templates
  3. Friday, 23 November 2018
  4.  Subscribe via email
Hello,
i had already used the search function but unfortunately found no suitable topic.

so my question is: is there a possibility to replace the header image slideshow pictures for the mobile view (mobile style) with pictures optimized for this purpose? alternatively the slideshow could be replaced by a single picture.

thank you very much for your help!
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

I could supply you with the needed CSS, however, I presume your reason for this is for performance purposes? There is no option in Joomla to stop a module been loaded depending on screensize, only hide that module as soon as it loads via a module class like phone-hidden. So any solution I give will still load the slideshow images on mobile devices but just hide the slideshow and display a single image instead which will give no performance benefit.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran and thanks for the quick answer!

no, my problem is not the performance but the scaling. on the desktop view there are 2 people left-justified in the picture for design reasons. in the mobile portrait and landscape view they are of course cut off. here they would have to be centered by a new picture or the existing slideshow would have to be zoomed out or shifted to the right (on mobile).

of course i prefer a more performant solution, but i accept every costum css code gratefully. :)

Thanks!

Hello

I could supply you with the needed CSS, however, I presume your reason for this is for performance purposes? There is no option in Joomla to stop a module been loaded depending on screensize, only hide that module as soon as it loads via a module class like phone-hidden. So any solution I give will still load the slideshow images on mobile devices but just hide the slideshow and display a single image instead which will give no performance benefit.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of your header slideshow?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
of course: ...
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

To amend you can add the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

Replace # with the URL to your image...

@media only screen and (max-width: 1024px) {
.vegas-slide, .vegas-nav {
display: none;
}
#container_header {
background-image: url('#');
background-size: cover;
}
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
perfect! Thank you!
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
worked perfect for me too ... Thanks!
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!