Corner To Corner Alignment

Question

I have the following code:

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

.square {
  max-width: 460px;
  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;
  margin-left: 10%;
}

.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);
}

.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;
}

.square .square-details {
  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;
}

.iframe {
  height: 1070px;
}

.container{
--bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
}

<section>
  <div class="section-title">
    <h2>Featured Blogs Of The Day</h2>
  </div>
  <div class="container1">
    <div class="square">
      <div class="square-image">
        <img src="assets/img/Blog1.png">
      </div>

      <div class="square-details">
        <h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
        <p0>It is that time of the year again (yay!) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
        <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
      </div>
    </div>
  </div>
</section>


<section id="resume" class="resume">
  <div class="container">

    <div class="section-title">
      <h2>IFrame
      </h2>
    </div>
    <div class="resume-item">
      <iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
    </div>

  </div>
</section>

I want the corner of the blog card to be perfectly aligned under the corner of the iFrame. The first corner of the blog card should be right under the first corner of the iFrame.

Expected Output

How would I modify the CSS to have it output as the above picture? Adding margin-left: auto on square does not solve the issue Any suggestions would greatly help! Please Help! Thanks a lot!

Your square class has all kinds of padding. – Phaelax z Jul 13 '21 at 15:40 — Phaelax z, Jul 13 '21 at 15:40

score 0 · Answer 1 · answered Jul 13 '21 at 15:41

you put too much margin on your '.square'. .square is within container1 and you're pushing it out by 10%. Using a percent will change the alignment weirdly when you resize contents. so try something like this

.square {
  max-width: 460px;
  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;
  /*changed piece*/
  margin-left: 10px;
  
}

score 0 · Answer 2 · answered Jul 13 '21 at 15:48

I'd suggest wrapping your square in the same class as the iframe so it will always be aligned since both will change in the same way, and removing the margin-left: 10% like this:

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

.square {
  max-width: 460px;
  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;
  /*Removed the 10% margin*/
}

.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);
}

.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;
}

.square .square-details {
  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;
}

.iframe {
  height: 1070px;
}

.container{
--bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
}

<section>
  <div class="section-title">
    <h2>Featured Blogs Of The Day</h2>
  </div>
  <!-- Same class as IFrame wrapping it -->
  <div class="container">
    <div class="square">
      <div class="square-image">
        <img src="assets/img/Blog1.png">
      </div>

      <div class="square-details">
        <h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
        <p0>It is that time of the year again (yay!) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
        <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div>
      </div>
    </div>
  </div>
</section>


<section id="resume" class="resume">
  <div class="container">

    <div class="section-title">
      <h2>IFrame
      </h2>
    </div>
    <div class="resume-item">
      <iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
    </div>

  </div>
</section>

Corner To Corner Alignment

Expected Output

2 Answers2