The responsiveness of the flex div and other divs is not optimal, causing fluctuations in height

Hey there, I'm trying to achieve a specific layout but I'm encountering an issue. Here's the code I've written:

@media only screen and (max-width: 990px) {
  .arri-light{
    margin-bottom: 20px;
    padding: 0px !important;
  }
.s-img{
  display:none;
}
.b-img{
  display:block;
}
}
@media only screen and (min-width: 991px) {

.s-img{
  display:block;
}
.b-img{
  display:none;
}
}

.but-new {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%); 
}
.nm-1{
  margin-top: -212px;
  margin-left: 133px;
  border-radius: 2px;
}

.all-bb{
  display: block;
  width: 100%;
  overflow: hidden;
  margin-top:22px;

}
.main-img{
  background-image: url('https://i.postimg.cc/hGFfjpLM/NEW-2.jpg');
  height: 400px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-repeat: no-repeat;
  max-width: 890px;
  overflow: hidden;
}


.b-h2 {
  text-align: center !important;
  font-family: 'Montserrat', sans-serif !important;
  color: #383e40 !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  margin: 0 0 0 0 !important;
  padding-top: 13px !important;
  text-transform: uppercase !important;
  padding-bottom: 10px !important;
}

.con-righ{
  color:white;
  display: inline-block;
  max-width:90%;
  background: #000000ab;
  padding: 36px;
  border-radius: 6px;
}

.con-left{
  color:white;
  display: inline-block;
  max-width:90%;
  background: #000000ab;
  padding: 36px;
  border-radius: 6px;
}
.new-h4 {
  color: white;
  
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  margin: 0 0 0 0;
}
.con-righ p{
  font-size: 17px;
  padding-top: 17px;
  padding-bottom: 17px;
  line-height: 25px;
  padding-right: 23px
}

.but-red{
  padding: 15px;
  border-radius: 5px;
  background-color: #ff0000;
  color: white !Important;
  width: max-content;
  font-size: 15px;
  text-decoration: unset;
  transition: .3s all;
  overflow: hidden;
  display: block;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
<div class="all-bb">

<div class="arri-light col-sm-12 col-md-4">

 <img src="https://i.ibb.co/jH5bTZ6/NEW-1.jpg" class="s-img"> 
<img src="https://i.ibb.co/gvDsjVt/NEW-1-BIG.jpg" class="b-img"> 
 <a class="but-red but-new" href="#"> My button</a>

</div>


<div class="main-img col-sm-12 col-md-8">
  <div class="con-righ">
     <h4 class="new-h4">Projects</h4>
     <p class="s-img">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
<p class="b-img">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum dolor.</p>
     <a class="but-red" href="#"> View  Projects</a>
  </div>

</div></div></div>

I'm facing an issue where these two divs have different heights when the screen size changes. You can see the problem in this image https://i.sstatic.net/leygJ.png. Any ideas on how to fix this discrepancy, especially on small desktop screens?

htmlcsstwitter-bootstrapflexbox

Answer №1

To create equal height columns, turn your .row into a flex container.

Here is an example:

.row {
  display: flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.arri-light img {
  height: 100%;
}

SEE DEMO

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

Customizing content based on Route - Utilizing Node.js/React

I am currently working on setting up routes for different pages of store profiles in my Node app. I have been doing some research online and have come to understand how to adjust the parameters, but I am struggling with figuring out how to dynamically chan ...

javascripthtmlnode.jsreactjsexpress

Error during compilation due to a missing parenthesis in the loop structure

I've been experimenting with creating a carousel using just html and css, without any Javascript. I've been exploring resources on the web and following tutorials to achieve this goal. However, I've encountered an issue. I created a mixin l ...

cssloopscompilationless

The appearance of the image varies between Chrome and Internet Explorer

Greetings fellow web developers! Currently, I am facing an issue with a logo embedded in a navigation bar displaying differently in Chrome compared to IE version 10 running document standards. The webpage is utilizing bootstrap CSS. Here is the code snippe ...

javascripthtmlcssinternet-explorergoogle-chrome

Placing horizontal text over a Bootstrap 5 grid

Currently working my way through Boostrap5 while developing my website and I am extremely pleased with the progress so far. However, I have hit a snag - I want the name to appear vertically when hovering over the images on the bottom left, but for some rea ...

csscss-gridbootstrap-5

Using the margin-top property in CSS will only take effect if a border has been declared

Greetings, I have been noticing a strange occurrence lately, and I finally decided to seek some answers. Below is a snippet of my basic HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page Title< ...

htmlmargincss

Switching from a vertical to horizontal tab layout in Angular 4 Material 2 using MD-Gridlist

I'm currently trying to modify the tabbing functionality within an MD-Gridlist so that it tabs horizontally instead of vertically. I've experimented with tab indexes but haven't had any success. My goal is to enable horizontal tabbing throug ...

htmlangularangular-material2

Firefox browser does not display flashing titles for tabs

Every second, I want to display "New message..." in the title when the browser tab is inactive or the user is in another tab. Here's the code I used: <script> var mytimer; function log() { document.title = document.title == "" ...

javascriptjqueryhtml

Update the input type on the fly

Hey there, I've got a bit of an unusual question. I'm looking to create a form with fields that vary for each user, like a text input or a checkbox. I attempted using Angular to achieve this: <div ng-controller="myCtrl" ng-repeat="x in prova" ...

javascripthtmlangularjs

I'm noticing a significant slowdown on my webpage due to a high volume of href URLs in my HTML script. What steps can I take to resolve this issue

As a newcomer to scripting, I spent countless hours researching to find a solution but couldn't crack it. I implemented a jquery image search script that functioned smoothly with all components embedded in a single HTML code. However, things took a t ...

javascripthtmljquery

Prevent the sorting feature of angular-ui-sortable from functioning on the second div

I have set up a sortable option to arrange image positions. Now, I want to display another "div" if there are less than 5 images, where users can add new images. The issue is that the "add new image" div is nested within another div. Here is my HTML: < ...

htmlangularjsangular-uiangular-ui-sortable

Creating a responsive design with HTML and CSS that expands an image to hold additional text

I have a blue bubble image that I want to overlay text on. The amount of text will vary, so I need the image to expand vertically to accommodate more text. I'm hoping for some guidance on how to make the image adjust its size based on the amount of ...

htmlcssimage

Issues have arisen with the @keydown.ctrl and @keyup.ctrl event modifiers in Vue.js, as they are not properly responding

I have a project in VueJS where I need to implement a custom context menu that will pop up when the user hovers over specific elements on the page. This context menu is dynamic, meaning it changes as the user moves between different items. If the user hold ...

javascripthtmlvue.jsvuejs2

The elements within <header> and <footer> tags will always remain at the top of the page unless specifically

While working on creating semantically correct HTML, I included a header and footer in my document. The structure of the document looks like this: ... Currently, the header, main, and footer take up 100% of the height. I want t ...

csshtml

The iframe refuses to center when I adjust its size in the CSS document, but mysteriously shifts to the center when I resize it in the HTML document. I am determined to find a way

My iframe is left aligned and I'm having trouble centering it. .iframeContainer { display: inline-block; justify-content: center; /* Center the iframe horizontally */ align-items: center; width: 1067px; height: 600px; } < ...

htmlcssiframe

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div ...

javascriptjquerycss

Inject HTML entities, escaped for CSS, dynamically using JavaScript

My goal is to dynamically generate a list of HTMLElements with unique data-* attributes that correspond to various HTML Entities. These attributes will then be utilized by CSS to display content in pseudo elements like this: li:after { content: attr(dat ...

javascripthtmlcssfontsescaping

Top way to include an HTML and javascript file in an Ext.Panel within Sencha Touch

My main goal is to efficiently include external HTML files and display them on an Ext.Panel in Sencha touch 2.3 by creating a wrapper module for the HTML file that can be instantiated using xtype, with an external Javascript file for event handling. Updat ...

javascripthtmlextjssencha-touchsencha-touch-2

Scrolling horizontally and vertically in an HTML table with a fixed left column

Looking to design an HTML table that has a set height limit, with the left side staying fixed while scrolling horizontally (and having the ability to scroll horizontally within the table body), but not staying fixed while scrolling vertically (the left sid ...

htmlcssscrollhtml-table

Add a click event listener to the body element using a button click, without causing it to trigger

What is the current situation: A button is clicked by the user The menu opens (list items display = block) The function to close the menu is connected to the <body> The function to close the menu is immediately triggered, causing the menu to close ...

javascriptjqueryhtmlcss

Throwing two dice at random (with web links)

I'm currently facing an issue with rolling 2 dice, and then, if they match, the script should reveal which pair it was. All the dice images are stored on my server. It seems like I might be making some simple mistakes but unable to identify them rig ...

javascripthtmlarraysrandom