Reputation: 11
I have tried everything I can think of to get this layout to fit on mobile, but it doesn't seem to want to work. I have put the viewport, meta tag. I have put the @media css tag, and still no difference.
This completely baffles me on why this doesn't work.
Here is the HTML/CSS:
</title>
<style>
@font-face {
font-family: 'trench';
src: url('fonts/trench100free.ttf');
}
.content {
width: 480px;
overflow: hidden;
}
.trench-bold {
text-align: left;
font-family: trench;
font-size: 55px;
font-weight: bold;
color: white;
}
.pull {
margin-bottom: 2px;
font-size: 150%;
font-family: trench;
font-weight: bold;
-webkit-transition: .5s ease;
transition: .5s ease;
width: 180px;
padding: 5px;
color: black;
background-color: white;
text-align: right;
}
.pull:hover{
-webkit-transition: .5s ease;
width: 80%;
background-color: red;
text-size: 175%;
transition: .5s ease;
}
body {
margin: 0px;
}
a {
text-decoration: none;
color: black;
}
a:active {
color: black;
}
@media screen and (max-width: 400px) {
.content {
width: 100%;
}
.pull {
width: 50%;
}
.pull:hover {
width: 90%
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body background="index_background.png">
<div class="content" align="left">
<section class="trench-bold">/The Goust Server</section>
<br>
<a href="downloads.html"><div class="pull">Downloads</div></a>
<a href="links.html"><div class="pull">Links</div></a>
<a href="links.html"><div class="pull">About</div></a>
<br><br><br><br>
<section class="trench-bold">/Pages</section>
<br>
<a href="samsworld.html"><div class="pull">Sam's World</div></a>
</div>
</body>
Upvotes: 0
Views: 289
Reputation: 41
See, on touch devices "hover" effect doesn't works. You have to use some JavaScript / JQuery to achieve this effect and modify the CSS and HTML code accordingly.
[Instead, you can use :active in place of :hover, but that will be a partial solution.]
You can also try below JS code:
<script>
document.addEventListener("touchstart", function(){}, true);
</script>
Apart from this, I will highly recommend you to go through below link that will help you in understanding the problem and the various solutions you can use to achieve hover effect.
http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/
The link provided by J.Joe will also help.
Upvotes: 2
Reputation: 664
The problem is :hover behavior doesn’t exist on touch screen devices. Read this: How do I simulate a hover with a touch in touch enabled browsers?
Upvotes: 0
Reputation: 851
Actually it does work, try the device mode of chrome development tools and set any small device, or just adjust the window size of your browser.
Upvotes: 0