Agency theme homepage slider

Home Forums All Other Themes Agency theme homepage slider

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #159817
    Ruheene Jaura
    Participant
    • Topics: 11
    • Replies: 21
    • Total: 32
    Member since: March 24, 2020

    Hi,

    I’m using your Agency theme for my website and wanted to ask how I can have the homepage slider images fill the screen on mobile? Right now they fill the screen on a desktop, but not on mobile (the slider takes up less than half the screen on mobile).

    Here’s a link to the site:

    Home

    If you load it on desktop and mobile both, you’ll see what I mean.

    Thanks!
    Ruheene

    #159818
    Ruheene Jaura
    Participant
    • Topics: 11
    • Replies: 21
    • Total: 32
    Member since: March 24, 2020

    Not sure if my link loaded in the last post- but here it is again, just in case:

    pixelpie.io

    Thanks.

    #159841
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    I can’t understand a thing what you are saying.

    Can you send us the screenshot of your issues? Upload your screenshot on http://imgur.com/ and paste the share url here.

    Regards,
    Chris

    #159857
    Ruheene Jaura
    Participant
    • Topics: 11
    • Replies: 21
    • Total: 32
    Member since: March 24, 2020

    Hi Chris,

    Here is the imgur link with 2 screenshots below- one of my website on a desktop, and the other of my website on a mobile phone. See the difference in size/placement of the homepage slider on both devices? The images in the slider ‘cover’ the whole screen on a desktop (this is GOOD), but take up less than half the screen on a mobile phone (this is BAD- too much negative space on screen).

    I would love to have the images in the slider ‘cover’ the entire screen on a mobile device as well. Let me know if anything is still unclear.

    Thanks,
    Ruheene

    https://imgur.com/a/uWAsdjR

    #159928
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    @media screen and (max-width:479px) {
    .nivoSlider { min-height: 63vh !important;}
    .nivoSlider img {
        max-width: 200% !important;
        width: 200% !important;
    }
    }

    Regards,
    Chris

    #160057
    Ruheene Jaura
    Participant
    • Topics: 11
    • Replies: 21
    • Total: 32
    Member since: March 24, 2020

    Thanks. That definitely made it larger, but it still doesn’t cover the screen. I tried 100vh and 300% instead of 200%, but that didn’t work either.

    Any suggestions?

    #160076
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    Hi,

    Kindly use this one:

    @media screen and (max-width:479px) {
    .nivoSlider { min-height: 63vh !important;}
    .nivoSlider img {
        max-width: 350% !important;
        width: 350% !important;
    }
    }

    Regards,
    Chris

    #160143
    Ruheene Jaura
    Participant
    • Topics: 11
    • Replies: 21
    • Total: 32
    Member since: March 24, 2020

    That worked, thank you! Much appreciated.

    #160157
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25285
    • Total: 25285
    Member since: August 16, 2013

    👍

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.