Currently, I am in the process of creating a basic mobile website that can be accessed through a QR code leading to the page linked below. However, I have encountered an issue where viewing it on my Android or Apple phone results in excess width. Any advice or suggestions would be greatly appreciated. You can view the live version at this link:
Below is the HTML/CSS code:
Promotion
<style>
html,body
{
width: 400px;
height: 200px;
}
h1{color:#00a94f;
text-align:center;}
p{
font-weight:bold;
font-size: 14;
text-align:center;
font-family:Arial;}
img{
position:relative;
height:100px;
width:200px;
padding-left:100px;}
#coupon{
padding-top:15px;
position:relative;
border: 3px dashed;
width: 400px;
height:200px;
border-radius:5px;}
</style>
</head>
<body>
<div id="coupon">
<h1>Promotion</h1>
<p>Promotion Texts</p>
<p>Coupon Code: <span style="color:red; font-size:24;">xxx-xxx</span></p>
</div>
</body>