[Pro] Responsive Modal Pop-UP

Freeway
1

Hi all

I’m working on a modal pop-up, see example URL (pop-up appears after approx 3 seconds), and all working OK so far except that on mobile screens I can’t get the pop-up to sit in the middle of the screen horizontally, I guess because % measurements aren’t being used? Is there something I can add to the script that will make it more responsive at mobile screen sizes?

Thanks
Dave

http://www.stundesign.co.uk/footsteps/Pop/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Where did you get this particular script from Dave

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

Try this on your mobile

http://www.deltadesign.co/DD/modaltest.html

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

On 25 May 2016, 5:14 pm, DeltaDave wrote:

Where did you get this particular script from Dave

D

Hi Dave

Script was adapted from the one found here:

Dave

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

On 25 May 2016, 5:43 pm, DeltaDave wrote:

Try this on your mobile

http://www.deltadesign.co/DD/modaltest.html

D

Hi Dave

Here’s a screenshot of your link from my iPhone, it’s still not sitting in the middle of the screen.

https://dl.dropboxusercontent.com/u/595516/IMG_1425.PNG

I can adjust the script so it does, but then it’s off on desktop screens???

Dave

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

Here’s a screenshot of your link from my iPhone, it’s still not sitting in the middle of the screen.

This is what I see from your link

At least mine is OK vertically!

I will have a look and see if there is a margin issue.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

And if you look at the demo that goes along with the script you will see it isn’t correctly centered on mobile either.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

8

I think the issue is that the total width (including padding) of 300 is not being taken into account. Nominally 280px.

Try it without that padding and see what you get.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

9

On 25 May 2016, 10:28 pm, DeltaDave wrote:

I think the issue is that the total width (including padding) of 300 is not being taken into account. Nominally 280px.

Try it without that padding and see what you get.

D

Yep you got it! Adjusted the padding to just be at the bottom of the window and added padding to the text div to compensate and it’s working fine now:

https://dl.dropboxusercontent.com/u/595516/File%2026-05-2016%2C%2009%2011%2033.png

Top notch advice as always.

Cheers

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options