skip to Main Content

Im currently working on making onesie scrolling website but i came accross the problem. I want my text be on the centre of first "page" but i cant make it to looks good on phone and desktop at the same time.
With padding-top: 50% it looks good at mobile but terrible at desktop, on the other hand padding-top: 7 looks good on desktop but not much at phone. Can someone help me finding the golden mean?

padding 50%
also padding 50%

my html code:

section {
  width: 100%;
  height: 100vh;
}

.main section.page1 {
  background: #81D4FA;
}

.main section.page2 {
  background: #F5F5F5;
}

.main section.page3 {
  background: #81D4FA;
}


h1 {
  font-size: 8vw;
  color: #efefef;
  text-align: top;
  padding-top: 50%;
  padding-left: 15%;
}

h2
{
  list-style-type: none;
  font-size: 4vw;
  color: #efefef;
  text-align: center;
  padding-top: 2%;
}

a.read-more{
  border: 2px solid #efefef;
  text-decoration: none;
  color: inherit;
}


.notnav {
  list-style-type: none;
  font-size: 3vw;
  padding-top: 2%;
  padding-left: 5%;
  padding-right: 15%;
}
<div class="main">
  <section class="page1"> 
    <h1>
      ABOUT ME
      <li class="notnav">
        I am John, 19 years old computer science student. Mainly coding in python, but I am quick lerner and flexible person. I am currently intrested in Artificial Intelligence, Big Data and Design 
      </li>
    </h1>
    <h2>
      <a class="read-more" href='/about'>Read More</a>
    </h2>
  </section>
  <section class="page2">        
     <h1>
      PROJECTS
    </h1>
  </section>
  <section class="page3"> 
    <h1>
      CONTACT
    </h1>
  </section>
</div>

2

Answers


  1. Based on your code, here is example of adaption for section.page1 with Media queries. This is what you should use to make your code adapting and responsive.

    @media screen and (min-width: 400px){
          section {
            width: auto;
            height: auto;
          }
          section.page1{
            padding: 20px;
          }
          h1 {
            font-size: 8vw;
            color: #efefef;
            text-align: top;
            padding-top: 10px;
            padding-left: 15%;
          }
        }
    

    Here is a large explication about it : Mozilla Developper Using_media_queries

    Get more practice and Examples with w3Schools

    You can also use bootstrap to get easy css with their grid system : Bootstrap Grid

    section {
      width: 100%;
      height: 100vh;
    }
    
    .main section.page1 {
      background: #81D4FA;
    }
    
    .main section.page2 {
      background: #F5F5F5;
    }
    
    .main section.page3 {
      background: #81D4FA;
    }
    
    
    h1 {
      font-size: 8vw;
      color: #efefef;
      text-align: top;
      padding-top: 50%;
      padding-left: 15%;
    }
    
    h2
    {
      list-style-type: none;
      font-size: 4vw;
      color: #efefef;
      text-align: center;
      padding-top: 2%;
    }
    
    a.read-more{
      border: 2px solid #efefef;
      text-decoration: none;
      color: inherit;
    }
    
    
    .notnav {
      list-style-type: none;
      font-size: 3vw;
      padding-top: 2%;
      padding-left: 5%;
      padding-right: 15%;
    }
    
    @media screen and (min-width: 400px){
      section {
        width: auto;
        height: auto;
      }
      section.page1{
        padding: 20px;
      }
      h1 {
        font-size: 8vw;
        color: #efefef;
        text-align: top;
        padding-top: 10px;
        padding-left: 15%;
      }
    }
    <div class="main">
      <section class="page1"> 
        <h1>
          ABOUT ME
        </h1>
        <div class="notnav">
            I am John, 19 years old computer science student. Mainly coding in python, but I am quick lerner and flexible person. I am currently intrested in Artificial Intelligence, Big Data and Design 
          </div>
        <h2>
          <a class="read-more" href='/about'>Read More</a>
        </h2>
      </section>
      <section class="page2">        
         <h1>
          PROJECTS
        </h1>
      </section>
      <section class="page3"> 
        <h1>
          CONTACT
        </h1>
      </section>
    </div>
    Login or Signup to reply.
  2. Try this(without the use of media-query);Sorry late to the party

    section {
    width: 100%;
    height: 100vh;
    }
    
    .main section.page1 {
    background: #81D4FA;
      }
    
     .main section.page2 {
        background: #F5F5F5;
        }
    
       .main section.page3 {
       background: #81D4FA;
       }
    
       .page1{
      display:flex;
      min-height: 100%;
      align-items: center;
     text-align: center;
     flex-direction: column;
    justify-content:center;
    }
    
    h1 {
    font-size: 8vw;
    color: #efefef;    
       }
    
        h2
       {
       list-style-type: none;
       font-size: 4vw;
       color: #efefef;
       text-align: center;
       }
    
      a.read-more{
      border: 2px solid #efefef;
      text-decoration: none;
      color: inherit;
      }
      .notnav {
        list-style-type: none;
        font-size: 3vw;
        clear: both;
       }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search