I have 2 problems

1

Merry Christmas everyone,

the First problem is why I cant have the button in the middle of the page?? although I am typing

Right: 50%;
OR even
Left: 50%;
I feel the balance is incorrect.

the second problem is why I have white spaces on the edges of the page in mobile or tablet size screen after using the media queries on both in CSS?? although I tried to use

Margin: 0px;
Or even padding: 0px;
but it still did not work for me.

Here is the link from CodePen that you can look at: https://codepen.io/andrewalkazeer/pen/QJMNmZ

Thank You. :slight_smile:

2 
// At the top of the CSS
html,
body {
  height: 100%;
  padding: 0;
}


.nav-bar-page1 {
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translateX(-50%);
}

.title width 100% is causing an overflow

@media screen and (max-width: 640px) {
  .title {
    left: 50px;
    /* width: 100%; */
    top: 290px;
  }
}
1 Like
3

It worked thank you very much bro, I do not know anything about translateX so I will go do my research to understand what it does :slight_smile:

4

Yes sorry I did actually want to explain it but I got distracted and wanted to at least post the CSS.

Let me try, I might do a horrible job of this.

So we push the element from the left 50%. Now the left side of the element box is in the center, but we want the center of the element box to be in the center. So we move the element back by -50% of itself (i.e. half its width). Now the center of the element box is in the center of the parent container.

You can use the same technique to horizontal and vertical center an element inside the parent container.

.positioning-center-horizontal-vertical {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

I have a CodePen with some centering stuff

2 Likes
5

thank you for the explanation, I added your CodePen to my favorite thank you again :slight_smile: