CODEWITHSUNDEEP
htmlcssreactjs
Daredevil
Daredevil

Reputation: 1802

CSS styling not symmetrical in different size window

So I made a simple page that looks like below:

enter image description here

It looks fine but if I change it to a smaller window or changing the zoom %, this is what it looks like:

enter image description here

As you can see, it's not right as the button is way off but the <p> and <h> tag seems to be align but not the button.

Here is my relevant part of the code:

function Pitch() {
  return (
    <div className="section">
      <div className="descriptionpitch">
        <h1>See what's next.</h1>
        <p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
      </div>
      <div className="joinbutton">
        <button>JOIN FREE FOR A MONTH</button>
      </div>
    </div>
  );
}

scss:

.section {
  color: white;
  margin: 0 3%;
  position: absolute;
  top: 35%;
  font-size: 1.8vw;
  //text-align: center;

  @media (max-width: 1000px) {
    top: 55%;
    font-size: 1.9vw;
  }
  @media (max-width: 800px) {
    top: 60%;
    font-size: 3.2vw;
    margin: 0 4em;
    text-align: center;
  }

  h1 {
    font-size: 3em;
    margin: 0 0 0.2em;
    font-weight: 700;
  }
  p {
    margin: 0 3.5em 0 0;
    font-weight: 700;
  }
  button {
    font-size: 14px;
    letter-spacing: 1.9px;
    font-weight: 100;
    margin: 1.2em 24.5em 0 0;
    padding: 12px 2em;
    color: white;
    background-color: #e50914;
    cursor: pointer;
    text-decoration: none;
    //vertical-align: middle;
    font-family: Arial, sans-serif;
    border-radius: 2px;
    user-select: none;
    // text-align: center;
    border: 0;
    &:hover {
      background-color: #e53935;
    }
  }
}

Is there a way i could fix this?

Upvotes: 0

Views: 252

Answers (3)

Manikandan2811
Manikandan2811

Reputation: 841

Try this code..add this in same div.. if u want more space at the top of the button. add margin-top for this button

function Pitch() {
  return (
    <div className="section">
      <div className="descriptionpitch">
        <h1>See what's next.</h1>
        <p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
        <button>JOIN FREE FOR A MONTH</button>
      </div>      
    </div>
  );
}

And modify this css code too..

css

  @media (max-width: 800px) {
    .section {
        text-align: left;
    }
  }

Upvotes: 1

Alexis Navarro
Alexis Navarro

Reputation: 1

Remove the margin-right from the button in your 800px media query.

Upvotes: 0

Akber Iqbal
Akber Iqbal

Reputation: 15041

In your CSS code, make on change, remove text-align: center; from this block

...
  @media (max-width: 800px) {
    top: 60%;
    font-size: 3.2vw;
    margin: 0 4em;
    /* text-align: center; */
  }
...

working demo on stackblitz here

Upvotes: 0

Related Questions