Results 1 to 4 of 4

Thread: help making pop up mobile friendly

  1. #1
    Join Date
    Sep 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question help making pop up mobile friendly

    1) Script Title: Interstitial Content Box (v1.1)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...terstitial.htm

    3) Describe problem: I made an html page to load onLoad and it's not mobile friendly. Here's the code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Take advantage of this fabulous offer NOW!</title>
    <style type="text/css">
    body {
    	background-color: #fff;
    }
    .text {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 24px;
    	font-style: normal;
    	color: #000;
    }
    </style>
    </head>
    <body>
    <center>
      <div class="text">&nbsp;</div>
      <div class="text">5% OFF WITH FREE DELIVERY ANY SIZE YURT<br />HAVE US BUILD YOUR PLATFORM AND RECEIVE 10% OFF</div>
      <div class="text">Sale ends 1/31/2016.</div><br />*Added features for each package are not transferrable. Offer is not a cash offer and cannot be transferred or combined with any other offer or promotions. Offer not available with credit card purchases.
      <div><img src="http://www.whitemountainyurts.com/images/2016-new-year-sale.jpg" width="auto" height="auto" /></div>
      <div><a href="http://whitemountainyurts.com/the-yurts.html" target="_blank" class="text">Click here to Read More...</a></div>
      <div>&nbsp;</div>
    </center>
    </body>
    </html>
    what's wrong with it sorry - wicked newbie here. here's the site: http://www.whitemountainyurts.com
    Last edited by Beverleyh; 01-02-2016 at 01:16 PM. Reason: Formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Here's your problem - in the interstitial.css file
    Code:
    width: 800px; /*Width of interstitial box*/
    Fixed width units don't work on mobile if they exceed the width of the mobile screen. It needs to be a fluid unit, such as %, like on the demo page;
    Code:
    max-width: 670px; /*Width of interstitial box*/
    width: 95%; /*Width of interstitial box*/
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Sep 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default responsive pop up size

    thank you so much, that helped

    Quote Originally Posted by Beverleyh View Post
    Here's your problem - in the interstitial.css file
    Code:
    width: 800px; /*Width of interstitial box*/
    Fixed width units don't work on mobile if they exceed the width of the mobile screen. It needs to be a fluid unit, such as %, like on the demo page;
    Code:
    max-width: 670px; /*Width of interstitial box*/
    width: 95%; /*Width of interstitial box*/

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Happy to help
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Replies: 36
    Last Post: 07-12-2015, 11:29 PM
  2. { Help ] Mobile Friendly Version not working .
    By Akhiltheblogger in forum PHP
    Replies: 2
    Last Post: 05-30-2015, 07:41 PM
  3. Mobile friendly upgrade
    By theremotedr in forum CSS
    Replies: 12
    Last Post: 04-07-2015, 08:58 AM
  4. Google mobile friendly help
    By theremotedr in forum General Paid Work Requests
    Replies: 4
    Last Post: 03-24-2015, 06:56 AM
  5. Mobile friendly website
    By rohitnarang12 in forum Other
    Replies: 2
    Last Post: 11-10-2010, 01:28 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •