"Utilizing bootstrap4's grid system for organizing content in

Having encountered an issue with the code, I am facing an alignment problem in which some columns are longer than others when viewed on a mobile device. Here is the existing code snippet:

Below is the current code:

    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6; cursor: pointer;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}" style="height:auto;"/></a>
            <a ><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}"style="height:auto;" /></a>
            <a ><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/policy.jpg')}}" style="height:auto;"/></a>
            <a ><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}" style="height:auto;"/></a>
            <a><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}" style="height:auto;"/></a>
            <a ><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}" style="height:auto;"/></a>
            <a><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
</div>

My goal is to have all columns appear the same width and height, with two columns and three rows on mobile devices. The current setup of three columns and two rows on desktop devices is acceptable.

cssbootstrap-4

Answer №1

Implementing this in Bootstrap-3 with a grid system and images of varying heights wouldn't result in a clean out-of-the-box pure CSS solution...

  1. You can achieve it using JavaScript to get the height of one image and set the height of the corresponding shorter card.
  2. Alternatively, you can set a fixed number as the height for each card.
  3. Consider exploring a Bootstrap-4 flexbox based solution.

The code snippet below (referring to number 2 above) utilizes specific height values to achieve the desired effect, providing a solution that may be easier to implement compared to the other options.

.likes_comments1 {
  margin-bottom: 10px;
}

.likes_comments1 a img {
  max-height: 210px;
}

@media screen and (max-width:768px) {
  .likes_comments1 a img {
    max-height: 200px;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="col-xs-6 col-sm-4 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
  <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6; cursor: pointer;">
    <a><img class="image img-rounded img-responsive center-block" src="https://www.akberiqbal.com/Jumbo.jpg" style="height:auto;" /></a>
    <a>
      <p class="audiowide" style="">Track more 1</p>
    </a>
  </div>
</div>
<!-- Additional similar HTML code for more cards -->

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 content on the page is not visible when viewing on an Android device in

After spending a considerable amount of time browsing StackOverFlow for coding solutions, I have come across a problem that I can't seem to find an answer for. Yesterday, I made some changes to the media queries on my site in order to incorporate a dr ...

jquerycssmedia-queries

What could be the reason behind my table appearing all crammed up in a single

My table is appearing in a single cell, and I can't figure out what's wrong. Can someone please take a look and let me know where I messed up? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" cont ...

htmlcss

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

I am in need of help with coding so that my entire webpage is displayed properly even when I resize it to the smallest width. Additionally, I need assistance with making

Having some issues with making my personal website work correctly. I'm planning to share images of how it looks at different widths - largest width and smallest width. Also, here are the links to my website here and to my GitHub code here Seeking gui ...

cssresponsive-designresponsiveweb-frontendresponsiveness

Why does Drupal's Advagg display several css and js files?

After installing the Advag module, I noticed that it is combining files, but there seems to be an issue: <link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__sqX0oV0PzZnon4-v--YUWKBX0MY_EglamExp-1FI654__IOPiOtulrIZqqAM0BdQC ...

javascriptcssdrupal-7

Is it possible to attach the entered URL to an image following the text that has been inputted?

I've coded everything but the jquery part isn't working. Enter URL :<input type="text"> <button id="btn"> continue </button> <div contenteditable="true" id="bod"> Click here to start typing</div> $(document).ready( ...

javascriptjqueryhtmlcssangularjs

The static background and fixed header are locked in a perpetual battle

I am currently working on creating a fixed header that remains at the top of the page. However, I am facing an issue where the background seems to be overlapping and hiding the header. <style type="text/css> html, body {height:100%; margin:0; paddin ...

htmlcss

Photos on Display are Misaligned

I'm currently in the process of developing a responsive photo gallery based on this tutorial. Within my project, there exists a component known as MemoryList which is defined as shown below: import React from 'react'; import _ from 'lo ...

cssreactjs

Is it possible to comment out classes within a specified class attribute? How can this be achieved?

Is there a way to temporarily omit specific classes within HTML (<div class="" ...>)? For instance: <div data-group="group1" data-container="true" class="container-lg d-flex /* slider */ p-0"> In this s ...

htmlcss

Stop Bootstrap 4 from automatically wrapping columns to the next row

I'm experiencing an issue with a component using Bootstrap 4 where a column is expanding to another row due to the presence of a long text element with the "text-truncate" class. This results in Chrome vertically stacking the column below its intended ...

cssbootstrap-4grid-layout

Tips for customizing text color in a disabled MUI TextField?

In the disabled TextField, I want the text color to be black instead of the default gray. I attempted the following after finding inspiration from this source: <TextField id="outlined-basic" value={'https://git.responsive.software/my-app ...

cssmaterial-uitextfield

css rules are not applied if the element is dynamically added using javascript

I'm encountering an issue with my code that inserts icons into a div with the ID of "editor". When I try to add a <select> element to the div with the ID of "drug_tool", the CSS styling rules for it are being ignored. How can I resolve this prob ...

javascriptjqueryhtmlcss

Is it possible to remove the left margin on an li element by placing a td element inside it using HTML and

Here is my custom HTML code including the CSS styles: <!DOCTYPE html> <html> <head> <style> table td { border: 1px solid black; } li { margin-left: 3 ...

htmlcsshtml-listshtml-tablemargin

Tips for enabling the wrap property with autogeneratecolumn set to true

In my grid view, I want to ensure that any text in a column that exceeds the width of the column will either wrap within the column or display on a new line. Below is the code for the grid view: <asp:GridView ID="GridView1" AllowSorting="True" runa ...

c#asp.netcssgridview

By employing timeUpdate in conjunction with currentTime

I am looking to utilize the timeUpdate and currentTime functionalities to display or hide a div at a specific time during video playback. I have been able to make it work, but it seems to be showing and hiding every second I specify. Below is the code I ...

javascripthtmlcss

pages with parallax scrolling arranged in a unique and unconventional manner

Below the fullscreen home card, I want the about div to appear I am struggling to get it to display correctly. In my HTML code, both divs are in the correct order, but I couldn't find any solutions online. <body> <div class="homeCard"& ...

htmlcssparallax

The presence of an image within an HTML anchor is causing an unexpected artifact to

Currently, I am working on a simple header design, but there seems to be a strange issue with the anchors containing image tags. The problem can be seen in the screenshot below: Image Link Here is the HTML structure: <div class="block-content"> ...

htmlcssanchor

Activate the display by utilizing the getElementsByClassName method

In my design, I'd like to have the "Don't have an account?" line trigger the display of the .registrybox class when clicked. However, the script I've written doesn't seem to be working as intended. The script is meant to hide the .login ...

javascripthtmlcss

Using jQuery to move a div to a specific location on the page

Is there a way to translate the position of div x and y using Jquery that is compatible with all browsers, such as IE 7, IE8, IE9, and IE10? I have attempted the following: <div id="s1" style="-ms-transform:translate(159,430)"> hello ...

javascriptjqueryhtmlcssinternet-explorer

Adjust the svg rate using jQuery or JavaScript

Seeking help with a gauge I found on CodePen - struggling to adjust bubble values... <path id="Fill-13" fill="#F8B50F" d="M3.7 88.532h26.535v-#.795H3.7z"/> Can change the bars in JS, but not the bubbles using jq/js. Adjust the gauge with values be ...

javascriptjqueryhtmlcsssvg