CODEWITHSUNDEEP
htmlcsswebresponsive-designdevice
Tobias Rasmussen
Tobias Rasmussen

Reputation: 41

HTML. Make Website Fit Other Devices And Screens?

I recently got "done" with a website (http://calcultr.comxa.com/). It looks fine on my screen, but on my friends' screen it does not fit the screen. The same with my other devices. I have added this to the Head tag:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, intial-scale=1">

I have heard many people saying "that will fix the problem", but it didn't. I don't even know what it means. Were they lying? How would I make my website fit any device and screens?

Upvotes: 0

Views: 10180

Answers (6)

Kode.Error404
Kode.Error404

Reputation: 573

As mentioned,

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

... was not added to the top of the source code. And if you are trying to make it responsive, you may wish to add css media queries.

For example,

@media screen and (min-width: 480px) {
    body {
        background-color: blue;
        //whatever styling...
    }
}

Upvotes: 1

Layth Alzamili
Layth Alzamili

Reputation: 31

You can do it with bootstrap

<html>enter code here
<head>
<title>FORM PAGE</title>    
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background: #eee">
    <div class="container p-2 mt-5" style="background: #fff">
       <div class="row mt-5 text-center">
        <div class="col-md-10 col-12">
           <form>
              <label>enter your name</label>
               <input type="text" placeholder="enter your name" id="name"><br><br>
               
               <label>enter your age</label>
               <input type="text" placeholder="enter your age" id="age"><br><br>
               
               <label>enter your phone number</label>
               <input type="text" placeholder="enter your phone" id="phone"><br><br>
               
               <button id="add" type="button" class="btn btn-primary">insert</button>
            
            </form>
           </div>
        </div>
    </div>
</body>

</html>

Upvotes: -1

Person0z
Person0z

Reputation: 41

Actually, you just need this bit of code:

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

Upvotes: 0

Akash
Akash

Reputation: 377

Try using frame work like bootstrap, foundation, etc.. if you want cross browser compatibility for front end designs

Upvotes: 0

Even Stensberg
Even Stensberg

Reputation: 508

Try looking at bootstrap. It is really simple and you can make responsiveness to all devices just by adding some naming to your id's and classes :) Here's the link, hope this helps!

Upvotes: 0

andrralv
andrralv

Reputation: 860

Your website doesn't display properly on your friends computer because he/she has another resolution. That's the complicated part of front-end designing. You have designed your website for ONE resolution/device/screen, now you have to do it for the rest, or at least come up with a solution that works for most devices and screens.

These are the options you have:

  1. Design using percentages in CSS so that your page will adapt to a percentage of the screen of the user. CSS - Percentages or Pixels?

  2. Use media queries to adapt the pixel sizing according to the users;' https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Upvotes: 1

Related Questions