Style fields using CSS for proper alignment

I am looking to maintain the size of the authors section in a fixed ratio, similar to what is shown in the image. How can I ensure that the authors field remains constant while other fields like title and content may vary?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c1dec1c1d4c39fdbc2f1809f80879f80">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="row justify-content-between mt-5">
    <div class="col-md-4 mt-5 mb-5">
        <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
            <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
        </a>
        
        ...
        
      </div>
      <div class="col-md-4 mt-5 mb-5">
        <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
          <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
        </a>
        
        ...

      </div>
      <div class="col-md-4 mt-5 mb-5">
        <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
          <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
        </a>
        
        ...   
      
      </div>
  </div>
csstwitter-bootstrapbootstrap-4

Answer №1

For optimal functionality, it is advised to enclose your elements with classes .mt-3 and .sq-profile within another wrapping element.

To achieve this layout, designate your col-md-4 element as a flex parent with a column direction. To prevent interference with other .col-md-4 elements, consider assigning them unique classes.

Subsequently, apply flex properties to the new wrapping element by making it a flex parent with a height equal to the remaining container space (flex: 1 1 100%), setting its direction to column, and justifying the content to space-between, thus aligning the text at the top and the profile at the bottom.

.col-md-4 {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}

.content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11617e616174633f7b6251203f20273f20">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="row justify-content-between mt-5">
  <div class="col-md-4 mt-5 mb-5">
    <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
      <img src="https://siyahklasor.com/uploads/articles_images/articles_163/photo-3663910902.jpg" class="img-fluid rounded">
    </a>

    <div class="sq-category mb-3 mt-2">
      <span class="text-muted">General</span>
    </div>

    <div class="sq-title">
      <a href="https://siyahklasor.com/home/details/excelde-en-cok-kullanilan-formuller">
        <h2 class="sq-h2">Most Frequently Used Excel Formulae</h2>
      </a>
    </div>
    <div class="content-wrap">
      <div class="mt-3">
        <p>Every trader should have a solid grasp of numbers in their professional life. Positioning ourselves in the business realm...</p>
      </div>

      <div class="media mt-5 sq-profile">
        <a href="https://siyahklasor.com/profile" class="text-decoration-none">
          <img src="https://siyahklasor.com/assets/img/1596865798.png" class="avatar mr-3">
        </a>
        <div class="media-body">
          <p class="mt-1"><strong>Mehmet Sezenoğlu</strong> <br> August 31, 2020</p>

        </div>

      </div>
    </div>

  </div>
...
... (continued structure)
...
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent global CSS from affecting VueJS by enabling only scoped CSS within components

Is there a way to eliminate all global CSS within a VueJS component and only allow scoped CSS? If so, how can this be achieved? Below is the issue I am trying to address: * { /* Global styles */ } /* Component-specific styles */ .items ul { } .i ...

cssvue.js

What is the best method for importing data into an array using AngularJS?

Check out the Plunker link I have shared. Can you help me identify any mistakes? <a href="https://plnkr.co/edit/3VryaPGtgPRD6Nn8zx7v">Click here to visit the Plunker page</a> ...

htmlcssangularjs

How do I ensure that a fieldset and a multiple selection box have equal heights using CSS?

Is there a way to make the multiple selection box the same height as the fieldset, without using JavaScript? I have a form with a fieldset and select box side by side, and any assistance would be appreciated. <!DOCTYPE html> <html lang="en> ...

htmlcssheight

What's the best way to increase vertical spacing between elements within a <div> when viewed on mobile devices?

Presently, I have designed a <div> that adjusts according to screen size. For wider screens: https://i.sstatic.net/0X6tq.png On mobile screens: https://i.sstatic.net/mYZxE.png I am looking to create vertical spacing between the two rows on mobil ...

htmlcssflexbox

What is the best way to position an image within a smaller div at the center?

Similar Question: Aligning image to center inside a smaller div I am facing an issue related to CSS 3. Here is a snippet of my HTML code: <div id="main" style="width: 320px; height: 400px;"> <img src="test.jpg" height="400" /> </div ...

htmlcss

Dim the color of a date on the Sharepoint calendar

Trying to gray out specific days in a SharePoint calendar using the script editor. Looking to target individual days like Christmas day. Came across an article that uses code to gray out weekends, but I need something more precise... Not sure if this code ...

htmlcsssharepointcalendarsharepoint-designer

Troubleshooting problem with width in CSS for Apple iPhones

Managing a website at has presented a curious challenge. While it displays properly on Android devices, the UI appears distorted on Apple products. Specifically, below the slider, where two images are supposed to be shown horizontally, there seems to be ...

cssios

"Concealing children elements disrupts the functionality of the CSS grid layout

Is there a way to prevent layout issues when using CSS to dynamically display items? For example, when hiding button A it causes the Edit button to shift to the left instead of sticking to the right edge of the grid as expected. <html> <body> ...

htmlcsscss-grid

Stripping out only the position attribute using jQuery

I have implemented a code with the following characteristics: The navigation items' texts are hidden behind certain Divs, which I refer to as Navigation Divs. When the mouse hovers over these pixels (navigation Divs), the text that is behind the ...

javascriptjquerycss

When a button is undersized, the click event may not register

In my angular application, I have developed a directive for a tinyMCE editor. Upon setup, I have implemented two handlers: one for the blur event to hide the toolbar and another for the click event to show it. Additionally, I have created another directive ...

csstinymce

Unusual HTML Structure (content misplaced or out of order?)

Recently, I started learning CSS/HTML in school and we just delved into Javascript. Currently, we are working on a website project. However, while trying to integrate the content with the navbar, I encountered a strange issue. When resizing to 620px or le ...

javascripthtmljquerycss

I'm unsure of the steps to take to complete this task. Thank you

Make sure to create a container DIV with the CSS class of "menu". Inside this .menu DIV, there should be 4 additional DIV elements, each having a class of "item". Every .item DIV needs to have an IMAGE element that displays a placeholder image from , and ...

htmlcss

Change the order of columns using CSS in a mobile-first approach

Is there a way to achieve the layout shown in the image using only HTML and CSS? I attempted rearranging the stacked elements for larger screens by: #2: float: left #1: display: inline-block #3: float: right However, this approach did not yield the desi ...

htmlcss

Is there a way to make the edges of this table more curved?

I utilized an HTML code generator to easily create this table, but I am struggling to give it rounded borders. .tg { border-collapse: collapse; border-spacing: 0; } .tg td { border-color: black; border-style: solid; border-width: 3px; font- ...

htmlcss

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

Looking to transform a div with the transform: scale(-1,1) property while using background-clip: text on the text within it. However, this causes the text to disappear. Here's what I've attempted: .reverse { transform: scale(-1, 1); } .gr ...

javascripthtmlcss

The dynamic columns in the grid are showcased with a seamless transparent background

I am currently working on a dynamic grid structure in my project, using div layout. The number of columns and rows can vary as they are retrieved from the json data in AngularJS. The grid should allow both horizontal and vertical scrolling when the column ...

htmlcssangularjs

How can I fix the issue of the dropdown button extending the height of the navigation bar when clicked on?

Currently, I am working with the Laravel framework and aiming to incorporate a Bootstrap dropdown within a navbar without affecting its height when clicked. Preview image: https://i.sstatic.net/r9uhH.png Despite going through the documentation for both B ...

laravelbootstrap-4dropdownnav

Create dynamic web pages using Angular's capability to render HTML, CSS, and

I've encountered an issue while trying to integrate a code snippet received from a post API response into an Angular HTML file. The code works perfectly fine when pasted in the HTML section of Codepen, as shown in the screenshot here. However, when at ...

javascripthtmlcssangularrazorpay

Troubles with CSS in Wordpress

Hey there! I'm currently working on some wordpress tasks and running into an issue with the code. Everything looks good in the first two sections, but the third section is displaying at the top. Please refer to the attached image for a visual of the p ...

htmlcsswordpresswordpress-theming

Firefox is giving me trouble with my CSS/JS code, but Chrome seems to be working

Having some trouble with this code - it seems to be working fine in most browsers, but Firefox is giving me a headache. I've tried using the moz abbreviations in CSS and JS tweaks, but no luck. Is there a property that Mozilla Firefox doesn't sup ...

javascriptcssgoogle-chromefirefoxcross-browser