CODEWITHSUNDEEP
htmlcss
victoria
victoria

Reputation: 23

I am having issues aligning my "calculate btn" to the center on mobile

I am having issues allinging my "calculate btn" to the center on mobile

Please I am confused, my "calculate button", I am not able to align it to center on mobile view

I tried making use of the align center attribute but it failed

On mobile view, the calculate button shifts to the right, Please this my first time working pure css, thank you.

.calculate-button {
  /* margin-top: 7px; */
  width: 50%;
  margin: 20px 0;
  align-items: center;
}

.btn {
  width: 100%;
  font-family: inherit;
  font-size: 18px;
  padding: 10px;
  border-radius: 7px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  color: white;
  background-color: #7e1c1c;
  margin-left: 127px;
  outline: none;
  border: 0;
  align-items: center;
  text-align: center;
  width: 100%;
}

.btn:hover {
  background-color: rgb(185, 23, 23);
  color: white;
}
<!----Calculate---->
<div class="calculate">
  <small id="error"> error message</small>
  <div class="calculate-button">
    <!-- onClick event function -->
    <button class="btn" onclick="lovecal()">Calculate Love(%)</button>
    <!-- End onClick event function -->

    <!-- Added images -->
    <!-- <img src="images/love2.jpg" id="image1" alt="" /> -->
    <!-- <img src="images/love2.jgp" id="image2" alt="" /> -->
  </div>
  <div class="answer">
    <!-- <img src="images/love2.jpg" alt="" /> -->
    <!-- <div class = "input-heart"><i class="fas fa-heart fa-4x "></i></div> -->

    <h2 class="heading">45</h2>
  </div>
  <div class="message">
    <p></p>
  </div>
</div>

Upvotes: 1

Views: 30

Answers (1)

Florentin Sakwiset
Florentin Sakwiset

Reputation: 49

Set the width of the .calculate-button to 100% and use text-align: center to center its content. And for the .btn class, we're setting its display to inline-block and its width to 50% so that it fits in the center of the .calculate-button.

.calculate-button {
  width: 100%;
  text-align: center;
  margin: 20px 0;
}

.btn {
  display: inline-block;
  width: 50%;
  font-family: inherit;
  font-size: 18px;
  padding: 10px;
  border-radius: 7px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  color: white;
  background-color: #7e1c1c;
  outline: none;
  border: 0;
  text-align: center;
}

Upvotes: 1

Related Questions