0

Angular project

I have a resizable button that works under certain conditions. My problem is that I feel my code should work, and I will explain what I have and what is expected.

app.component.ts

<button class="button button5"> </button>

app.component.css

.button {
    background-color: #0066ff;
    border: 1px solid #0066ff;
    color: white;
    height: 60%;
    width: 60%;
    margin-left: 20%;
    margin-right: auto;
    margin-top: 20%;
    padding: 0;
}

.button5 {
border-radius: 50%;
}

index.html

<body>
  <app-root>

  </app-root>
</body>

index.html css

<style>

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

app-root {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
}

</style>

My goal is to create a button, that is always 60% height of the page, and 20% from the top. Also, 60% width while being 20% from the left.

This works perfectly under certain conditions such as.Here is my goal, unresized but when I resize it a little bit This happens.

As you can see it is not 20%. I do not know why, at no point did I ever hard code values and the entire time I am strictly using percentages so I thought it was fool proof. Why does it look like 5% on the top and 35% on the bottom

memeKing
  • 113
  • 2
  • 10

1 Answers1

0

I think you should use vh and vw units (called viewport units). If you always want 20% from the screen as margin so it's 20vh, and the same for other property. % always refer to width so if you resize the screen you get less width and thus margin decrease. But using 20vh mean 20% of the screen height so it's not affected by screen width:

.button {
  background-color: #0066ff;
  border: 1px solid #0066ff;
  color: white;
  height: 60vh;
  width: 60vw; /*You can also keep 60% as % depend on width and here width of parent is equal to 100vw so you will have the same result*/
  margin-left: 20vw; /* You can also keep 20%*/
  margin-right: auto;
  margin-top: 20vh;
  padding: 0;
}

.button5 {
  border-radius: 50%;
}
<button class="button button5"> </button>

But it seems you want to center the button in the middle of the screen, so you can rely on flex and avoid specifying margin:

body {
  height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.button {
  background-color: #0066ff;
  border: 1px solid #0066ff;
  color: white;
  height: 60vh;
  width: 60vw;
  padding: 0;
}

.button5 {
  border-radius: 50%;
}
<button class="button button5"> </button>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Sorry, I not have a complete understanding of CSS yet. Are you saying that if I write margin-top: 20%, it is 20% of the width? I always assumed since it was a vertical component that it referred to 20% of the height. Cheers. I will look into the vh and vw units. – memeKing Jan 12 '18 at 00:32
  • @memeKing yes that's :) 20% will refer to width of parent and that's why it decrease when you resize. And you will also notice it's exactly the same value as margin-left, you can check dev tools when resizing – Temani Afif Jan 12 '18 at 00:33
  • Just another question, when you said % always refer to width. Is this for any situation using the % sign. So even if I write height: 100%, this is referring to making my height, 100% of the width of my parent? This is very unintuitive, is there a reason for this, is does width provide a lot of value for monitors/screen resolutions? @Temani Afif – memeKing Jan 12 '18 at 00:43
  • @memeKing not for any situation .. for height it's not for example, height:100% means 100% of the height of the parent if it's specified ... but when it's used with padding/margin it refers to width ... well there is a lot of situation and they are not the same, i advice you to read more about relative units and you will understand more how the work in each situation :) – Temani Afif Jan 12 '18 at 00:47
  • @memeKing here is a useful quesiton that deals with your issue : https://stackoverflow.com/questions/4982480/how-to-set-the-margin-or-padding-as-percentage-of-height-of-parent-container – Temani Afif Jan 12 '18 at 00:53
  • Thanks for the replies! <3 – memeKing Jan 12 '18 at 01:09