Is there a way to make each anchor/button not change/move its place upon resizing web-screen?

user_14687782 0
Viewed 68

As you can see in the image provided, if i try to resize the webpage, the "read more" anchors/buttons are also moving. is there a way to make their respective places to remain unchanged upon resizing web-screen? i also tried position fixed.

enter image description here

This is the only code used with regards to the issue, i am using bootstrap with little css.

<section class="second-section">
<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md bg-white border">
      <div class="card-1 text-left ">
        <h1>Business <span>Mentoring</span></h1>
        <p>Our mentors are leading professional and experts in their field with a passion....</p>
        <a href="#" class="readMore-anchor">Read more</a>
      </div>
    </div>
     <div class="col-md bg-white border">
      <div class="card-2 text-left">
        <h1>Business <span>Coaching</span></h1>
        <p>Our coaches are successful professional and leaders in their field, who ....</p>
        <a href="#" class="readMore-anchor">Read more</a>
      </div>
     </div>
     <div class="col-md bg-white border">
      <div class="card-3 text-left">
        <h1>Personal <span>Mentoring</span> and coaching</h1>
        <p>is where have professionals ready to work with a family,...</p>
        <a href="#" class="readMore-anchor">Read more</a>
      </div>
     </div>
     <div class="col-md bg-white border">
      <div class="card-4 text-left">
        <h1>Career <span>exploration</span></h1>
        <p>Career advice and exploration is vital if you want to maximise your potential in today's....</p>
        <a href="#" class="readMore-anchor">Read more</a>
      </div>
     </div>
  </div>
</div>
</section> 

.card-1 .card-2 .card-3 .card-4 h1{
  width: 100%;  
  font-size: 40px; 
  line-height: 50px; 
  font-family: "Montserrat Bold";
}
.card-1 h1 span{
  display: block;
}
.card-1 .card-2 .card-3 .card-4 p{
  width: 100%;
  max-width: 325px;
  font-size: 16px;
  color: #232020;
  line-height: 28px;;
  font-family: "Montserrat Regular";
} 
.second-section p{
  margin: 0;  
}
.readMore-anchor{
  width: 100%;
  height: 47px;
  font-size: 16px;
  max-width: 161px;
  line-height: 50px;
  padding: 15px 38px;
  background-color: #8cd9f9; ;
}
bootstrap-4 css html
2 Answers

Had this same issue awhile back and here is how I solved it (although there may be other ways):

  1. Add position relative to the four container cards (note that this is not for the cards, it is for the buttons). In your example this would be the div which has the common class bg-white. Also add a padding to the bottom of the container cards that creates a space for the buttons to float in when we position them.
.bg-white {
       position: relative;
       padding-bottom: 60px; 
    }
  1. Absolute position the buttons within the space we just created.
.bg-white > .text-left > .readMore-anchor {    
    position: absolute;
    right: 10px;
    bottom: 10px;
}

You should end up with something like this, where the white space between the text and the buttons will automatically adjust to match the card with the most text, keeping it uniform. (I didn't finish making mine quite as pretty as yours but I believe it has the functionality you are looking for).

Horizontal Screenshot Of Result

.card-1 .card-2 .card-3 .card-4 h1{
  width: 100%;  
  font-size: 40px; 
  line-height: 50px; 
  font-family: "Montserrat Bold";  
}
.card-1 h1 span{
  display: block;
}
.card-1 .card-2 .card-3 .card-4 p{
  width: 100%;
  max-width: 325px;
  font-size: 16px;
  color: #232020;
  line-height: 28px;;
  font-family: "Montserrat Regular";
} 
.second-section p{
  margin: 0;  
}
.readMore-anchor{
  width: 100%;
  height: 47px;
  font-size: 16px;
  max-width: 161px;
  line-height: 50px;
  padding: 15px 38px;
  background-color: #8cd9f9; ;
} 



.bg-white {
   position: relative;
   padding-bottom: 60px; 
}

.bg-white > .text-left > .readMore-anchor {    
    position: absolute;
    right: 10px;
    bottom: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<section class="second-section">
    <div class="container-fluid">
      <div class="row text-center">
         <div class="col-md bg-white border">
          <div class="card-1 text-left ">
            <h1>Business <span>Mentoring</span></h1>
            <p>Our mentors are leading professional and experts in their field with a passion....</p>
            <a href="#" class="readMore-anchor">Read more</a>
          </div>
        </div>
         <div class="col-md bg-white border">
          <div class="card-2 text-left">
            <h1>Business <span>Coaching</span></h1>
            <p>Our coaches are successful professional and leaders in their field, who ....</p>
            <a href="#" class="readMore-anchor">Read more</a>
          </div>
         </div>
         <div class="col-md bg-white border">
          <div class="card-3 text-left">
            <h1>Personal <span>Mentoring</span> and coaching</h1>
            <p>is where have professionals ready to work with a family,...</p>
            <a href="#" class="readMore-anchor">Read more</a>
          </div>
         </div>
         <div class="col-md bg-white border">
          <div class="card-4 text-left">
            <h1>Career <span>exploration</span></h1>
            <p>Career advice and exploration is vital if you want to maximise your potential in today's....</p>
            <a href="#" class="readMore-anchor">Read more</a>
          </div>
         </div>
      </div>
    </div>
    </section>

user_39819130

add this to your existing css

.readMore-anchor{
        position :absolute;
        bottom:2%;//according to your need//
        left:2%;//according to your need//
    }


.container{
 position :relative;
}

**wrap this anchor tag( with class readMore-anchor) around a div class container **

user_144756180
Related