Why is my site not scaling on my mobile phone?

Question

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>

What actual change do you want to see when you scale to mobile view ? — rifa_at_so, May 31 '16 at 04:16
I wanted the 'Download', 'Links', 'About', and 'Sam's World' to scale up to the phone, so the when the buttons were selected, they expanded to 90% of the screen. Also I wanted the text to scale. — GOUST, May 31 '16 at 04:19

score 2 · Answer 1 · edited May 31 '16 at 12:21

2

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.

edited May 31 '16 at 12:21

thor

21,418
31
87
173

answered May 31 '16 at 12:17

Rahul Kharya

41
3

Ok, I have tried this. I have added that JS, and still nothing. Its the scale of the website itself, not the hover effect. The scale is not matching any mobile devices, and any line of code that attempts to create a responsive site, doesn't seem to help anything, with the given html and css above. – GOUST May 31 '16 at 13:09

score 0 · Answer 2 · answered May 31 '16 at 04:25

0

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.

answered May 31 '16 at 04:25

Juanín

841
6
16

I tried that. When I go on the site to check for a responsive website on google, the picture of the site doesnt fit at all. And when I actually check on my phone, it doesnt work. – GOUST May 31 '16 at 04:28
Hmmm I just copied and pasted it on a file and opened it on chrome. And it worked for me. – Juanín May 31 '16 at 04:40

score 0 · Answer 3 · edited May 23 '17 at 12:07

0

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?

edited May 23 '17 at 12:07

Community

1
1

answered May 31 '16 at 04:28

J.Joe

644
2
7
20

Its not even that. And it does exist, as when you hold it down, it expands. The issue is the scaling of elements. – GOUST May 31 '16 at 04:31
`Also I wanted the text to scale.` Then you should change the font-size of the text. `.pull:hover { font-size: 200%; }` – J.Joe May 31 '16 at 04:34
I have tried that a few minutes ago. It only seems to make the text bigger overall. I want it to scale perfectly with the screen. Also, the meta tag seems to be completely ignored for some reason. – GOUST May 31 '16 at 04:36
There is no css property call 'text-size: 175%' exist. you should change the css to 'font-size: 175%;'. – rifa_at_so May 31 '16 at 04:44
If you want to scale the font in mobile view. you should add the font-size to `@media screen and (max-width: 400px)`. – rifa_at_so May 31 '16 at 04:54

Why is my site not scaling on my mobile phone?

3 Answers3