I am new to html/css. The css that I created for my website works fine on my MacBook screen, and it also looks fine in responsive design view on Firefox in all the media query sizes that I have created for. However, when I open the website on my iPhone or iPad, the css doesn't work. The background image is zoomed in and the style is collapsed. I uploaded/refreshed all the related files to my server and tried several times, but it still gives me the same problem.
Does anyone give me a possible solution? Thank you!
`<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AU</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript" src="js/parallax.js"></script>
<link rel="shortcut icon" type="image/png" href="images/favion.png" />
</head>
<body>
<section class="module parallax parallax-1">
<div class="container">
<div class="box"><img src="images/AUlogo.png" /><span class="aki">AU<h2>sometor</h2></span></div>
</div>
<div class="button"><a href="#entries">view projects</a></div>
<div class="footer">
<ul>
<li><a href="index.html"><h3>eng</h3></a></li>
<li><a href="indexjpn.html"><h3>jpn</h3></a></li>
</ul>
</div>
</section>`
> `> `
.container {
max-width: 1366px;
margin: 0 auto;
height: auto;
}
html, h1, .aki {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul {
list-style-type: none;
text-align: center;
}
li {
display: inline-block;
}
a {
text-decoration: none;
}
section.module:last-child {
margin-bottom: 0;
}
.box { /*grey box*/
width: 100%;
background: rgba(148, 147, 147, 0.3);
position: absolute;
margin-top: 0%; /*DON'T TOUCH!Matches the top of the container*/
padding-top: 1%;
padding-bottom: 1%;
}
.box img { /*logo inside the grey box*/
align: middle;
display: inline-block;
}
.button {
background-color: #05a9b3;
border-radius: 4px;
color: #fff;
text-decoration:none;
text-transform: uppercase;
text-align: center;
-webkit-transition: none;
transition: none;
box-shadow: 0 3px 0 #04929b;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
margin: 0 auto;
}
.entries a:hover, a:active, a:link, a:visited{
color: #fff;}
.button:hover {
background-color: #07bfca;
box-shadow: 0 3px 0 #05a9b3;
color: #fff;
}
.button:active {
top: 3px;
box-shadow: none;
color: #fff;
}
section.module.parallax {
padding: 10.625em 0;/*DON'T TOUCH!*/
background-position: 0 0;
}
section.module.parallax-1 { /*background of top page*/
background: url(../images/plbg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
position: relative;
margin: 0 auto;
}
.footer { /*eng+jpn*/
width: 96%;
margin: 0 auto;
}
.footer a:link, a:visited {
color: #fff;
}
.footer a:hover, .footer a:active {
color: #05a9b3;
}
`
`
Aucun commentaire:
Enregistrer un commentaire