Recent
Categories
View Replies (2)

LayerSlideshow image height object-fit: cover or similar in responsive mobile view?

  1. Issue
0
Votes
Undo
  1. Torbjörn
    Torbjörn
  3. Commercial Templates
  4. Sunday, 13 August 2023
  5.  Subscribe via email
The content (title-text-button) in LayerSlideshow image is not visible on mobile - especially portrait view. Works fine on desktop.

Changing settings in module or template, still keep the image "contain" i.e. image width always 100%

Is there a way to use the css "object-fit: cover" or something similar to the image?
References
  1. https://samfundet-sverige-faroarna.se
Responses (2)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Sure. To amend you can add the following to the Responsive Custom CSS fields within the General -> Responsive Options tab of your template settings. For more details on using these fields may I suggest the following article... https://joomla51.com/tutorials/template-parameters/applying-custom-css-to-a-screensize-device

(edit to taste)

.layerslideshow .img-fill {

    height: 300px;

}

.layerslideshow img {

    object-fit: cover;

    height: 100%;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Torbjörn
Torbjörn
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks Ciaran,
Perfect - Works like a charm.
Exactly what I wanted to achieve.

I'll take a look at the article you recommended :)
  1. more than a month ago
  2. Commercial Templates
  3. # 2
  • Page :
  • 1


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