CODEWITHSUNDEEP
htmlcssangularresponsive-design
Adrian
Adrian

Reputation: 61

HTML/CSS Centering problem with responsive design

I'm working on my portfolio website and I want to have four buttons that are centered in the middle of the page. They are centered when I am full screen on my laptop but when I shrink the screen they don't stay centered and get cut off. I want my webpage to look good on phones because I know people will be viewing it from their mobile devices.

I've tried using bootstraps col-sm and other resources without any luck. 

.container {
  /* display: static; */
  vertical-align: center;
  text-align: center;
  padding-top: 20%;
  padding-left: 10%;
}

body {
  height:100vh;
  background-position: center;
  background-repeat: repeat-y !important;
  background-size: cover;
  background-color: black;
}

.buttonB {
  transform: translate(-50%,-50%);
  width: 175px;
  height: 175px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background-size: 400%;
  margin: 15px;
  outline: 0 none;
}
<body background="assets/img/back2.jpg">
  <div class="container">
    <div class="row">
      <div class="col-12">
          <button mat-fab class="buttonB blue">About</button>
          <button mat-fab class="buttonB blue">Projects</button>
          <button mat-fab class="buttonB red">Contact</button>
          <button mat-fab class="buttonB red">Resume</button>
      </div>
    </div>
  </div>
</body>

Upvotes: 0

Views: 1603

Answers (5)

Akansha Gadhvi
Akansha Gadhvi

Reputation: 51

You can do that by removing transform in button and padding-left in your container class.

this is the forked stackblitz

Upvotes: 1

Gabriel Lopes
Gabriel Lopes

Reputation: 179

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-grow: 1;
  width: 70vw;
}

body {
  height:100vh;
  background-position: center;
  background-repeat: repeat-y !important;
  background-size: cover;
  background-color: black;
}

.buttonB {
  width: 200px;
  height: 175px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background-size: 400%;
  margin: 15px;
  outline: 0 none;
}
<body background="assets/img/back2.jpg">
 <div class="container">
      <button mat-fab class="buttonB blue">About</button>
      <button mat-fab class="buttonB blue">Projects</button>
      <button mat-fab class="buttonB red">Contact</button>
      <button mat-fab class="buttonB red">Resume</button>
 </div>
</body>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Remove the padding-left on the container and the transform on the buttons, which work against the centering: They offset the buttons and the container contents.

.container {
  vertical-align: center;
  text-align: center;
  padding-top: 20%;
}

body {
  height:100vh;
  background-position: center;
  background-repeat: repeat-y !important;
  background-size: cover;
  background-color: black;
}

.buttonB {
  width: 175px;
  height: 175px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background-size: 400%;
  margin: 15px;
  outline: 0 none;
}
<body background="assets/img/back2.jpg">
  <div class="container">
    <div class="row">
      <div class="col-12">
          <button mat-fab class="buttonB blue">About</button>
          <button mat-fab class="buttonB blue">Projects</button>
          <button mat-fab class="buttonB red">Contact</button>
          <button mat-fab class="buttonB red">Resume</button>
      </div>
    </div>
  </div>
</body>

Upvotes: 0

Asyranok
Asyranok

Reputation: 985

The button should be "margin: 0 auto" to center it within the context of its container. However, the resulting behavior is very difficult to guarantee without access to the full page. If that is possible, I will edit with a better answer.

Upvotes: 0

strugglingprogrammer
strugglingprogrammer

Reputation: 1

Have you tried adding a flex display to your container? That usually will keep everything aligned in the container the way you want it. All you have to do is add "display: flex;" within your .container block.

Upvotes: 0

Related Questions