CODEWITHSUNDEEP
htmlcssresponsive-design
Reece
Reece

Reputation: 2711

Making website scale instead of being responsive

I know this is a bad practice but I need to know how to make a full website scale down on smaller devices so they have to zoom in. Like this website: http://gamekeeperinn.co.uk/

I managed to partly do this by removing;

<meta name="viewport" content="width=device-width, initial-scale=1">

But my text doesn't scale with the rest of the website. Do you know how they have achieved this affect?

Upvotes: 1

Views: 912

Answers (1)

Stefan Ferdinand
Stefan Ferdinand

Reputation: 11

Correct me if im wrong, but this is what i came up with the text scaling using vh css unit, and i will demonstrate it with a html.

HTML:

 <div> <h1>test</h1> </div>
 <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do    
     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
     ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
     aliquip ex ea commodo consequat. Duis aute irure dolor in 
     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
     pariatur.
 </p>

CSS:

body{
    margin: 10vh;
    padding: 5vh;
    background-image: url(https://img.freepik.com/free-vector/wrinkled-paper-texture_1100-12.jpg?size=338&ext=jpg);
}

h1{
    text-align: center;
    font-family: arial;
    font-size: 3vh;
}

p{
    text-align: center;
    text-align: justify;
    position: sticky;
    font-size:3vh;
    color: red;
}

even if you zoom out or in, the text will also scales with your view.

Upvotes: 1

Related Questions