Content of Page to remain centred (Vertically)

shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins

Hey Guys.

Hoping to find a way to have specific pages take on the entire display of any given screen size, and remain centred.

Here on my website: https://www.shearerviljoen.com/Contact I'm hoping to have both the Contact page, as well as the About page to align centred on any viewing device; laptop, 27" screens, mobile etc. Including vertically.
Also, my contact page is only text, whereas the About page will have an image as well as text. So I'm hoping to find a CSS that can be applied to a separate page, and also to NOT include the footer as I want to have the footer remain at the bottom of the page.

(This will be applied to pages and not Galleries or folders.)

Hope I'm making sense.

Thanks guys.

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,846 Major grins

    This should get you pretty close:

    HTML

    <div class="content">
    
      <h4><a href="mailto:[email protected]" target="_self">[email protected]</a></h4>
    
      <div class="section">
        <h4>munich</h4>
        <h4>germany</h4>
        <h4>mobile: +49 152 07663856</h4>
      </div>
    
      <div class="section">
        <h4>cape town</h4>
        <h4>south africa</h4>
        <h4>mobile: +27 72 3750203</h4>
      </div>
    
      <h4><a href="https://www.instagram.com/shearerviljoen/" target="_blank">follow me on instagram</a></h4>
    
    </div>
    

    CSS

    .content {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      min-height: 80vh;
    }
    
    .section {
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin: 20px auto;
    }
    
    .content h4 {
      margin: 10px auto;
      font-size: 14px;
    }
    
  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins

    Thanks @Hikin' Mike. Worked perfectly. Will try use the HTML and CSS (altering) for my About page which includes an image, and see if I can get to to work. Will let you know how it comes out and/if I need your help on that one too.

Sign In or Register to comment.