How to fit all of this website content to any screen size?-CodePudding

I am trying to make my whole website fit into any display resolution. So for example when I load this website onto my phone it displays it accordingly. How do I fit all of this website content to any screen size? I tried using

<div style="background-color: white; width:105%; max-width:1920px; height:200px; margin-left:-8px; overflow: hidden;" > </div>

But I get an error, The bottom half of the content just disappears. How do I solve it?

<!DOCTYPE html>

<html>

<title> Hello </title>

<head> </head>

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

<style>

body { 
  font-family: "Arial";
  font-size: 30px;

}


.name{
  overflow: hidden;
  border-right: .01em solid black;
  white-space: nowrap;
  animation: 
    typing 2s forwards;
  font-size: 1.6rem;
  width: 0;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}



.name {
  color: #04143A;
  text-align: center;
  font-size: 70px;
  font-weight: 600;  
  margin: 0
}


.info h3 {
    color: #4A90E2;
    text-align: center;
    font-weight: 100;
    font-size: 40px;
    margin: 0
  
}


.skills_1 h3 {
  margin-left: 50px;
  color: #04143A;
  font-size: 30px;
  font-weight: 100
}



.list-card {
  font-size: 20px; 
  margin-left: 100px; 
}

.list {
  
     color: #4A90E2;
 
  
}

.list-card p {
  color: #091F4E
  font-size: 20px; 
  margin-left: 100px; 
  display: inline-block;

}

br{
    display: block;
    content: ""; 
    margin-top: 0; 
}



.job-title {
    font-size: 18px;
    vertical-align: top;
    background-color: #D9E7F8;
    color: #4A90E2;
    font-weight: 300;
    margin-top: 0px;
    margin-left: 10px;
    border-radius: 5px;
    display: inline-block;
    padding: 15px 25px;
}



</style>

<body>


<div class='intro'>
      <div >
          <h1 > Prajwal Sharma
          </h1>
      </div>


      <div >
        <h3 >Welcome!
        <span >Testing site</span>
        </h3>
      </div>

</div>


<div class='skills_1' >
        <h3> Technical Skills </h3>
<div>
  

<div >
                <div>
                <span >  Hello</span>
                    <p>Programming Languages: HTML, Python, C  , JavaScript</p>
                <br></br>
                <span >  Hello</span>
                    <p>Software Skills: Unity, Photoshop, PyCharm, VisualStudio</p> 
                <br></br>
                <span >  Hello</span>
                    <p>Programming Languages: HTML, Python, C  , JavaScript</p> 

                    
                </div>
        </div>

</div>

</body>

</html>

CodePudding user response：

What you need to learn is a skill called Responsive Web Design (RWD)

Here's a great starting point to learn RWD https://www.w3schools.com/css/css_rwd_intro.asp

in a nutshell, you will need to define how each component is displayed on smaller screens that are achieved by using viewport e.g:

h1 {
   font-size: 32px;
}

@media screen and (max-width: 1024px) {
   h1 {
     font-size: 24px;
   }
}

given above css code, browser will render <h1>I'm heading </h1> differently based on the viewport. Any devices that has width more that 1024px will render <h1> with font-size 32px. While on a smaller screen, the css below overwrite the style to use 24px

CodePudding user response：

you can add the following code in CSS .container { width: 100%; min-height: 200px; }