PDA

View Full Version : help making pop up mobile friendly



willkeyworth
01-02-2016, 11:48 AM
1) Script Title: Interstitial Content Box (v1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/interstitial.htm

3) Describe problem: I made an html page to load onLoad and it's not mobile friendly. Here's the 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

Beverleyh
01-02-2016, 12:35 PM
Here's your problem - in the interstitial.css file
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;
max-width: 670px; /*Width of interstitial box*/
width: 95%; /*Width of interstitial box*/

willkeyworth
01-03-2016, 12:31 PM
thank you so much, that helped


Here's your problem - in the interstitial.css file
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;
max-width: 670px; /*Width of interstitial box*/
width: 95%; /*Width of interstitial box*/

Beverleyh
01-03-2016, 05:26 PM
Happy to help :)