[Hustle Pop Up] Hello - I need help to get my pop-up box which has custom sizes responsive in a mo

Hello - I need help to get my pop-up box which has custom sizes responsive in a mobile phone

  • jnkfrancis

    Hi Jacquie,

    I hope you are doing well today. I would be happy to help you with customizing Hustle. Would you please enable support access?

    We have a guide here to walk you through the process if you are unfamiliar with granting support access. https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Once you do that please respond to this post that you have enabled Support Access so I will know and then I will be able to take a look.

    Thanks!

    Jeremy

  • jnkfrancis

    Hi Jacquie,

    I took a look at your site and I enabled your pop-up for mobile devices and added some CSS. I'll walk you through what I did so that you can recreate it again if you want to create a new pop-up offer.

    First I went to Hustle and clicked on "Edit" for the pop-up I wanted to edit.

    Then on the next page, I clicked on the "Design" tab and scrolled down to the bottom. On that page, I disabled the "Custom pop-up size" so that the pop-up was not locked into those dimensions but would be more responsive. Then I added the following custom CSS to limit the height of the pop-up, and make some adjustments to the way the image displayed on mobile:

    .hustle-modal-body {
        max-height:400px; /*Desktop pop-up no higher than 400px*/
    }
    @media screen and (max-device-width: 1025px) { /*Some adjustments for Mobile devices*/
        .hustle-modal-body {
            max-height:650px !important;
        }
        .hustle-modal-image {
            overflow:hidden;
        }
        .hustle-modal-image img {
            height:auto;
            margin-top:-35%;
        }
    }

    I saved those options then moved on to "Display Settings". On the "Display Settings" tab you had set the pop-up not to display on mobile devices, so I removed that rule so that it would run on mobile devices and I clicked save.

    From there I saved again and checked the site to make sure that the pop-ups worked the way I expected. You can always make some adjustments to the Custom CSS to dial in the pop-up to get it just the way you like it.

    I hope that get's you close to what you were looking for, if you need more help let us know.

    Jeremy

  • jnkfrancis

    Hi Jacquie,

    When I take a look at your pop-up in mobile, it has a lot of content for the space available. One solution would be to create a second pop up that is just for mobile devices. You can then modify the amount of content, or even remove the picture or make some adjustments to make your pop-up box smaller.

    You would do that making a copy of your original pop-up, by going to Hustle Pro > Pop-ups then clicking on the three dots to the right of your pop-up (See Screenshot).

    Then you will want to edit down the content of your duplicated pop-up. You might want to trim back the amount of text and remove the image. You can always put a link to a page the details of the promotion with another optin form on that page. Once you've edited the pop-up down to fit on a mobile screen, you will want to save your changes and then go to the "Display Settings" tab. On that tab you can specify the display conditions to only display the pop-up on mobile devices. (See screenshot)

    That way you can create a unique pop-up for the two screen sizes.

    Another option would be to bump the pop-up modal down a few pixels, but of course, it will require the user to scroll down to see the whole form.

    .wph-modal {
         top:75px;
    }

    Also, I would suggest that you put a limit to the number of times the pop-up can display. You can do that by selecting the "pop-up shown less than" rule and setting the max number of times the pop-up could be displayed.

    I hope one of those options work out for you. If you need more assistance let us know.

    Jeremy

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.