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)

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
# 1

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
# 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