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

Issue

Votes

Undo

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?

Responses (2)

ciaran

Accepted Answer Pending Moderation

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

more than a month ago
Commercial Templates
# 1

Torbjörn

Accepted Answer Pending Moderation

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

more than a month ago
Commercial Templates
# 2

Page :
1

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

Please login to post a reply

You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »

Forgot Password?

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

Site Links

Recommended

Join Our Newsletter