Element Alignment A Bit Off

Admin 1
Viewed 44

I am trying to make two corners of the element align so that they are exactly on top of the corners of the other element.

In other words, I am looking to match the corners of the element with the corners of another element.

This is the code:

@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');

.blogmaster {
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
}

.container1 {
 display: flex;
  flex-wrap: wrap;
  padding: 20px;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
}

.square {
  position: relative;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  width: 460px;
  max-width: 100% !important;
  height: 100% !important;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.square:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square1:hover {
  -webkit-transform: translate(20px, -10px);
  -ms-transform: translate(10px, -10px);
  transform: translate(10px, -10px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.square .square-image img{
 width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
 border-top-right-radius: 4px;
 border: 5px solid #555;
}
.square1 .square-image1 img{
 width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 4px;
 border-top-right-radius: 4px;
 border: 5px solid #555;
}
.square .square-details{
  padding: 20px 30px 30px;
}
.square1 .square-details1{
  padding: 20px 30px 30px;
}

.h11 {
  margin: auto;
  text-align: left;
  font-family: 'Merriweather', serif;
  font-size: 24px;
}

p0 {
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #C8C8C8;
  line-height: 18px;
  margin-top: 10px;
  display: block;
}

.button56 {
  background-color: #0563bb;
  color: white;
  width: 100px;
  padding: 10px 18px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 12px;
  margin-top: 18px;
  margin-bottom: 0;
  cursor: pointer;
  font-family: 'merriweather';
}
.button56:hover {
  opacity: 0.9;
  color: white;
}
.parent-div {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

@media screen and (max-width: 480px) {
  .parent-div {
    flex-direction: column;
  }
}
@media screen and (max-width: 480px) {
.square{
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
  }
}

@media screen and (max-width: 480px) {
.square .square-image img{
  height: 230px !important;
  border: 5px solid #555;
}
}
.square1 {
    justify-content: center;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  width: 460px;
  max-width: 100% !important;
  height: 100% !important;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 5px 20px #D9DBDF;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 480px) {
.square1{
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 54px;
  }
}
@media screen and (max-width: 480px) {
.square1 .square-image1 img{
  height: 230px !important;
  border: 5px solid #555;
}
}
<div class="row1">
            <div class="container1">
              <div class="square">
                <div class="square-image">
                <img src="assets/img/Blog1.png">
                </div>

                <div class="square-details">
                  <h3 class="h11">Sample Text</h3>
                <p0>More text goes here</p0>
                  <div><a href="#" target="_" class="button56">Read More</a></div>
                </div>
               
              </div>
              <div class="square1">
              <div class="square-image1">
              <img src="assets/img/Blog2.png">
                </div>

                <div class="square-details1">
                  <h3 class="h11">Sample Text</h3>
                <p0>sample text goes here</p0>
                  <div><a href="#" target="_" class="button56">Read More</a></div>
                </div>
               
              </div>
            </div>
          </div>

So when you run the above code, open it on a new page, it will look something like this:

This is what it will look when you open the above output in a new page

enter image description here

However, the problem is that I have the above code embedded in a website and so on my end the output is looking like this:

This is what the output looks like on my end

enter image description here

I would like the corners of this element to match with the corners of the bottom element, which is the WHAT I AM WORKING ON two boxes.

Expected Output

enter image description here

I want the corners that are circled in red to exactly be where the arrow points at. The corners that are circled in red should be right on top of the corners of the bottom element. In other words, I would just like the corners that are circled in red to exactly be where the arrow points at.

The cards should be shifted from their place to have the corners meet up with the corners of the bottom element. I just don't want the width of the blog cards to be extended so that the corners meet up. I want the whole blog card to move from its position so that the corners can meet up as shown in the expected output. This will create some space in between of the blog cards since both of the blog cards would be moved from their position, which I am fine with.

Incase you would require the CSS of the bottom element to know its margin/alignment:

.master {
  display: flex;
}

.master div {
  width: 98.6%;
}
@media all and (max-width: 500px) {
.master div {
    width: 99.9%;
 }
}

@media all and (max-width: 500px) {
  .master {flex-flow: wrap;}
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body20{
  height: 100%;
  place-items: center;
  background: transparent;
}
.skill-bars{
  padding: 25px 30px;
  background: #fff;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
  border-radius: 10px;
}
@media all and (max-width: 500px) {
.skill-bars{
    margin-bottom: 15px;
 }
}
.skill-bars .bar{
  margin: 20px 0;
}
.skill-bars .bar:first-child{
  margin-top: 0px;
}
.skill-bars .bar .info{
  margin-bottom: 5px;
}
.skill-bars .bar .info span18{
  font-weight: 500;
  font-size: 17px;
  opacity: 0;
  animation: showText 0.5s 1s linear forwards;
}

@keyframes showText {
  100%{
    opacity: 1;
  }
}
.skill-bars .bar .progress-line{
  height: 10px;
  width: 100%;
  background: #f0f0f0;
  position: relative;
  transform-origin: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
              0 1px rgba(255,255,255,0.8);
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
@keyframes animate {
  100%{
    transform: scaleX(1);
  }
}

.bar .progress-line span18{
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
}
/* SET THE ANIMATED CLASS TO GET IT TO ANIMATE */
.bar .progress-line span18.animated{
    animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line.html span18{
  width: 84%;
}
.bar .progress-line.css span18{
  width: 76%;
}
.bar .progress-line.jquery span18{
  width: 91%;
}
.bar .progress-line.python span18{
  width: 59%;
}
.bar .progress-line.mysql span18{
  width: 70%;
}
/* ADDED ANIMATED HERE SO ANIMATES ONLY WHEN IN THE VIEWPORT */
.progress-line span18.animated::before{
  position: absolute;
  content: "";
  top: -10px;
  right: 0;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-color: #000;
  opacity: 0;
    animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18.animated::after{
  position: absolute;
  top: -28px;
  right: 0;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
  100%{
    opacity: 1;
  }
}
.progress-line.html span18::after{
  content: "84%";
}
.progress-line.css span18::after{
  content: "76%";
}
.progress-line.jquery span18::after{
  content: "91%";
}
.progress-line.python span18::after{
  content: "59%";
}
.progress-line.mysql span18::after{
  content: "70%";
}


/* -----------------second box------------------------- */

.skill-bars1 {
  padding: 25px 30px;
  background: #fff;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
  border-radius: 10px;
}
@media all and (max-width: 500px) {
.skill-bars1{
    padding: 25px 30px;
 }
}

.skill-bars1 .bar1 {
  margin: 20px 0;
}

.skill-bars1 .bar1:first-child {
  margin-top: 0px;
}

.skill-bars1 .bar1 .info1 {
  margin-bottom: 5px;
}

.skill-bars1 .bar1 .info1 span19 {
  font-weight: 500;
  font-size: 17px;
  opacity: 0;
  animation: showText 0.5s 1s linear forwards;
}

@keyframes showText {
  100% {
    opacity: 1;
  }
}

.skill-bars1 .bar1 .progress-line1 {
  height: 10px;
  width: 100%;
  background: #f0f0f0;
  position: relative;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

@keyframes animate {
  100% {
    transform: scaleX(1);
  }
}

.bar1 .progress-line1 span19 {
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
}
.bar1 .progress-line1 span19.animated1{
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;

}

.bar1 .progress-line1.html1 span19 {
  width: 61%;
}

.bar1 .progress-line1.css1 span19 {
  width: 50%;
}

.bar1 .progress-line1.jquery1 span19 {
  width: 68%;
}

.bar1 .progress-line1.python1 span19 {
  width: 82%;
}

.bar1 .progress-line1.mysql1 span19 {
  width: 98%;
}

.progress-line1 span19.animated::before {
  position: absolute;
  content: "";
  top: -10px;
  right: 0;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-color: #000;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}

.progress-line1 span19.animated::after {
  position: absolute;
  top: -28px;
  right: 0;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}

@keyframes showText2 {
  100% {
    opacity: 1;
  }
}

.progress-line1.html1 span19::after {
  content: "61%";
}

.progress-line1.css1 span19::after {
  content: "50%";
}

.progress-line1.jquery1 span19::after {
  content: "68%";
}

.progress-line1.python1 span19::after {
  content: "82%";
}

.progress-line1.mysql1 span19::after {
  content: "98%";
}

HTML:

 <section>
      <div class="container" data-aos="fade-up">
      <div class="section-title">
        <h2>What I am Working On</h2>
        </div>
        <div class="master">
      <div class="column1">
      <div class="row1">
  <div class="skill-bars">
    <div class="bar">
      <div class="info">
        <span18>Harvard CS50 Course</span18>
      </div>
      <div class="progress-line html">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Youtube Channel (Java Tutorials)</span18>
      </div>
      <div class="progress-line css">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>C++</span18>
      </div>
      <div class="progress-line jquery">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Java</span18>
      </div>
      <div class="progress-line python">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Web Development (Front-End)</span18>
      </div>
      <div class="progress-line mysql">
        <span18></span18>
      </div>
    </div>
  </div>
            </div>
      </div>
      <!-- second box -->
       <div class="column1">
      <div class="row1">
  <div class="skill-bars1">
    <div class="bar1">
      <div class="info1">
        <span19>Competitive Chess (School Club)</span19>
      </div>
      <div class="progress-line1 html1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>Linkedin Learning</span19>
      </div>
      <div class="progress-line1 css1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>GitHub Side Projects</span19>
      </div>
      <div class="progress-line1 jquery1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>Computer Science and Math Tutoring</span19>
      </div>
      <div class="progress-line1 python1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>Reading "Cracking The Coding Interview" &#128522</span19>
      </div>
      <div class="progress-line1 mysql1">
        <span19></span19>
      </div>
    </div>
  </div>
            </div>
      </div>
            </div>
            </div>
    </section>

What I tried

I tried adding a master element just like it is shown in the CSS of the bottom element and added the same properties but it still did not work.

Any suggestions would greatly help!

Update

enter image description here

This is the output I am getting, the corners still do not match the corners of the bottom element.

css html jquery javascript
2 Answers
user_163247960

One solution from CSS Grid.

.container {
  width: 950px;
  margin: 0 auto;
}

h1.section-header {
  font-family: arial, 'sans-serif';
  font-size: 25px;
  color: #333;
  text-align: center;
  position: relative;
  padding-bottom: 15px
}

h1.section-header:after,
h1.section-header:before {
  position: absolute;
  width: 100px;
  height: 2px;
  background: gray;
  left: 50%; 
  transform: translateX(-50%);
  content: '';
  bottom: 0
}

h1.section-header:before { 
  height: 4px;
  width: 40px;
  background: blue;
  z-index: 3;
}  

.section-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.section-cols > div {
  background: gray;
  height: 200px; // only for demostration
  text-align: center
}

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <div class="container">
    <h1 class="section-header">Featured blogs of the day</h1>
    <section class="section-cols">
      <div class="col-left">Column Left</div>
      <div class="col-right">Column Right</div>
    </section>
    
    <h1 class="section-header">What I am working on</h1>
    <section class="section-cols">
      <div class="col-left">Column Left</div>
      <div class="col-right">Column Right</div>
    </section>
  </div>

user_37338310
Related