How can I improve slideshow in mobile view?

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
dawin9
Joomla! Apprentice
Joomla! Apprentice
Posts: 35
Joined: Wed Jan 09, 2013 11:00 am

How can I improve slideshow in mobile view?

Post by dawin9 » Wed Nov 30, 2022 8:47 am

hi. can somebody please tell me how to achieve a similar effect on my joomla site using joomla51 template to look like this S quare space template in mobile viin ew only as the desktop view is fine?

what i want is to have the slideshow in mobile view be the size of the mobile screen like it does in the square space template? On the Joomla site it resizes so the full width is showing and the height then only makes up half the mobile screen. If that makes any sense???

joomla site:https://holdwellbeing.co.uk/

square space site: https:// round-whale- 67m7. s q u a r e s p a c e .com

thanks
Last edited by toivo on Wed Nov 30, 2022 9:42 am, edited 1 time in total.
Reason: mod note: retitled, broke links

User avatar
Pavel-ww
Joomla! Guru
Joomla! Guru
Posts: 901
Joined: Tue Jun 30, 2020 12:17 pm

Re: How can I improve slideshow in mobile view?

Post by Pavel-ww » Wed Nov 30, 2022 1:29 pm

Hi. Something like this

Code: Select all

@media (max-width: 991px) {
    .layerslideshow .img-fill {
        height: 100vh;
    }
    .layerslideshow .img-fill img {
        width: 100%;
        height: 100%;
        object-position: 50% 50%;
        object-fit: cover;
    }
}

dawin9
Joomla! Apprentice
Joomla! Apprentice
Posts: 35
Joined: Wed Jan 09, 2013 11:00 am

Re: How can I improve slideshow in mobile view?

Post by dawin9 » Wed Nov 30, 2022 2:31 pm

That worked thank you


Post Reply

Return to “Templates for Joomla! 4.x”