Adjusting the dimensions of two pictures side by side using Bootstrap 3

I've been experimenting with Bootstrap to align two images side by side using different columns. I made sure they were aligned properly and even added some background colors for better visibility.

However, when I tested the responsive design by changing the resolution, I noticed that the images did not resize equally. They had the same height but different widths. Any ideas on why this is happening?

Below is the HTML code snippet:

.coresq {
  background-color: #131313;
}

.cordir {
  background-color: #AAAAAA;
}

.top-shows {
  margin-left: 0;
  margin-right: 0;
}

.top-shows [class^="col-"] {
  padding-right: 0;
  padding-left: 0;
}
<div class="container">
  <div class="row top-shows">
    <div class="col-xs-4 coresq ">
      <img src="img/slogan_part_1.jpg" alt="image" class="slogan_l img-responsive"/>
    </div>
    <div class="col-xs-8 cordir">
      <img src="img/slogan_part_2.jpg" alt="image" class="slogan_r img-responsive"/>
    </div>
  </div>
</div>

When I reduced the display size, I expected the responsive properties to resize equally since they are on the same line. Why aren't they resizing proportionally?

htmlcssimageresponsive

Answer №1

There are two variations of column sizes available. col-xs-4 and col-xs-8

To ensure both images have the same width, you should use identical column sizes. Consider using col-xs-6 for both columns to achieve this.

Answer №2

There is a disparity in column width between the two images, with one using double columns (xs-8) compared to the other (xs-4), causing the smaller column to be overshadowed when resizing.

Feel free to resize this external JSFIDDLE with equally sized columns

(Also, ensure that the images have equal dimensions as in the provided fiddle)

Answer №3

After conducting some research, I delved into Flex and also came across the updated version of bootstrap (4, which is still in alpha stage). Intrigued by what I read, I decided to give it a try. To my delight, it worked exactly as I had hoped, with only minimal adjustments needed in the code.

While the custom css remained the same, I utilized Bootstrap 4 (in alpha for testing purposes) and included the following HTML:

<div class="container">

    <div class="d-flex flex-row">

      <div class="col-xs-4 coresq ">
        <img src="img/slogan_part_1.jpg" alt="image" class="slogan_l img-fluid"/>
      </div>

      <div class="col-xs-8 cordir">
        <img src="img/slogan_part_2.jpg" alt="image" class="slogan_r img-fluid"/>
      </div>

    </div>


  </div>
  .

PS: It appears that the snippet preview is cutting off the last div tag in the code for reasons unknown. Just adding this note to clarify.

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

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

javascripthtmlcssangularjsangular

Troubleshooting: Jquery UI Draggable - Cursor losing track of draggable element

I want to create a draggable popup with Jquery UI functionality, but I'm facing an issue where the cursor does not stay aligned with the popup element when dragged. When dragging the popup element to the left, the mouse cursor goes beyond the div elem ...

javascriptjqueryhtmljquery-uijquery-ui-draggable

Is Next.js experiencing issues with animating presence specifically for exit animations?

I'm facing an issue with adding an exit animation to my components in next js. Despite setting an initial animation, the exit animation doesn't seem to work as expected. Could someone please help me figure out what I'm doing wrong here? Be ...

javascriptcssreactjsnext.jsframer-motion

Stopping horizontal scrolling in Material-UI Autocomplete/Popper: A troubleshooting guide

I am currently working on incorporating the Material-UI Autocomplete component, and my goal is to have each option label show an icon along with some text. The challenge I'm facing is that I only want the popper element to be the width of the text inp ...

cssreactjsmaterial-ui

What is the best way to include CSS in a CodeIgniter project?

I am facing an issue with loading a CSS file in Codeigniter. It seems like there might be something wrong with my code. Can someone help me understand how to properly load a CSS file in Codeigniter and possibly identify any errors in my current code? < ...

phphtmlcsscodeigniter

Is there a way to hide the thumbnail image when the title is hovered over without using CSS?

I'm currently using a simple jQuery script to switch between two thumbnails when hovering over a div. The code works perfectly for the .thumbs class, but I also want this functionality to work with the post titles. Unfortunately, adding the .headline ...

javascriptjqueryhtmlwordpresshover

Varying heights based on the screen size

Currently, I am in the process of designing my website and incorporating some wave elements to enhance the background. However, I've encountered some issues when resizing the screen. Specifically, the waves seem to shift with a space between them as t ...

javascripthtmlcss

Vue.js encountered an uncaught TypeError while trying to execute the 'drawImage' function

I am facing an issue with my vue.js application where I can successfully apply a filter to a photo, but I am unable to post it. The error message I am encountering is: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingCon ...

javascriptimagevue.jscanvasbase64

Create a text container that adjusts its size based on the content within

My goal is to create a unique display using CSS: I want to add various texts and lines to fill in the white space on the left and right sides. I have made some progress with this http://jsfiddle.net/g5jtm/, but I am facing a few issues: The text width ...

cssalignment

Ways to align a button in the center using Material-UI

I'm struggling to find a way to center buttons in Material-UI. Here is the code snippet I currently have: function BigCard(props) { const { classes } = props; return ( <div> <Card className={classes.card}> <C ...

cssreactjsbuttonmaterial-uialignment

TypeScript code runs smoothly on local environment, however encounters issues when deployed to production

<div> <div style="text-align:center"> <button class="btnClass">{{ submitButtonCaption }}</button> <button type="button" style="margin-left:15px;" class="cancelButton" (click)="clearSearch()"> {{ clearButtonCapt ...

htmlangulartypescriptdomangular-ng-if

The attempt to remove the ajax-loaded page while preserving the original div is proving to be

I have a function that is triggered when a link is clicked. This function uses ajax to load a new page over a div. <pre><code> function displayContent(id) { loadPage_signup = "register.php"; loadPage_info = "userinfo.php"; $.aj ...

javascriptjqueryhtmlcssajax

Utilize CSS to vertically align buttons

One of my current projects involves creating a panel with buttons organized in columns side by side, similar to the layout shown below: However, I am struggling to achieve this desired arrangement. Below is the code I have been working on: <style&g ...

javascripthtmlcssforms

Angular: bypassSecurityTrustHtml sanitizer does not render the attribute (click)

I'm facing an issue where a button I rendered is not executing the alertWindow function when clicked. Can anyone help?: app.component.ts: import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core'; import ...

htmlangulartypescript

When Css is incorporated within a text, it prevents the use of " " from functioning properly

I am currently developing a GUI application using Qt 4.8. I have a label that displays text in white (the stylesheet has already been set up for this) and I want to change the color of the word "UPDATE" to red. Here is my initial code: //all text in whit ...

c++cssqt

Icon: When clicked, initiate a search action

I am looking to make the icon clickable so that it can be used as an alternative to pressing the "return key" for searching. Check out this bootply example at . You simply need to click on the magnifying glass icon and it will initiate the search. ...

javascripthtmltwitter-bootstrap

Having performance issues with an HTML5/JavaScript game on Internet Explorer 8

A new game has been developed using html/javascript. Due to confidentiality reasons, the code cannot be fully shared. The game runs smoothly on most browsers except for IE, which poses a challenge. Compatibility with IE8 is essential, despite its limitati ...

javascripthtmlinternet-explorer

Make the HTML element expand to the remaining height of the viewport

Need help with creating a section that automatically fills the remaining viewport height below the navigation bar. The section includes a centered div and background image, along with a button at the bottom for scrolling down by one full viewport height. H ...

cssviewport

The page refreshes when the anchor element is clicked

Currently, I am working on enhancing a web application that is built on the foundation of traditional aspx (asp.net) web forms with elements of Angular 6 incorporated into it. My current assignment involves resolving a bug that triggers a page refresh whe ...

javascripthtmlasp.netangular

CSS - when "start" is not 1, an alternative to the "nth-child" selector

Imagine a scenario where you have a list of questions that start at 0 and you want to apply CSS styling based on their value. For instance, consider the following list... <b>How are you feeling?</b> <ol start="0"> <li>Great< ...

htmlcss