Below are three texts of varying sizes along with their corresponding images. I adjusted the height to align them properly, but when viewing on mobile devices, there are noticeable gaps between them

Three news articles are displayed below, each with its own image. The issue is that the text in the articles consists of quotes of varying sizes, causing them to not align properly. Adding a fixed height in pixels solves the alignment problem on the Desktop version, but on the mobile version, the fixed height creates a large gap between the articles.

<div style="padding-top:50px;" class="container">
<div class="card-deck">
<div class="col-sm-4">
<div class="card" style="margin:0!important;border:none;">
<div class="card-body">
<p style="text-align:center" class="card-text">"With an impressive and evergrowing number of studies finding CBD to be a powerful antioxidant and anti-inflammatory among many other properties, it is now being used to treat pain, anxiety, spasms, and much more"</p>
</div>
<img class="card-img-top" src="img\quote_pic1.png" alt="Daily Mail" style="width:50%;height:40px;margin:auto;">
</div>
</div>

<div class="col-sm-4">
<div class="card" style="margin:0!important;border:none;">
<div class="card-body">
<p style="text-align:center" class="card-text">“I think there is a legitimate medicine here,” he said. “We’re talking about something that could really help people.” Neurosurgeon Dr. Sanjay Gupta</p>
</div>
<img class="card-img-top" src="img\quote_pic2.png" alt="World Health Organization" style="width:50%;height:40px;margin:auto;">
</div>
</div>

<div class="col-sm-4">
<div class="card" style="margin:0!important;border:none;">
<div class="card-body">
<p style="text-align:center" class="card-text">Dr. Esther Blessing, an associate professor of psychiatry at New York University says  current evidence suggests that CBD shows promise for helping to treat everything from Anxiety to PTSD</p>
</div>
<img class="card-img-top" src="img\quote_pic3.png" alt="The Washington Post" style="width:80%;height:40px;margin:auto;">
</div>
</div>
</div>
</div>

View Big Gaps in Mobile Version

https://i.sstatic.net/ei67v.png

Answer №1

It would be beneficial to eliminate the columns from your layout. Instead, consider organizing your content in a card-deck format and controlling the number of cards per row/column using CSS.

Furthermore, I suggest removing the margin:0!important;border:none; styling because inline styling is not ideal. You can achieve the same effect using Bootstrap classes like m-0 and border-0. The text-center class can also be used to center text within your <p> tags.

Check out the revised layout below... (images have been included to visualize the final result)

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container pt-5">
  <div class="card-deck">
    <div class="card m-0 border-0">
      <div class="card-body">
        <p class="card-text tex-center">"With an impressive and evergrowing number of studies finding CBD to be a powerful antioxidant and anti-inflammatory among many other properties, it is now being used to treat pain, anxiety, spasms, and much more"</p>
      </div>
      <img class="card-img-top mx-auto" src="https://dummyimage.com/100x50/fff/000&text=LOGO" style="max-width: 40%;" alt="Daily Mail">
    </div>

    <div class="card m-0 border-0">
      <div class="card-body">
        <p class="card-text tex-center">“I think there is a legitimate medicine here,” he said. “We’re talking about something that could really help people.” Neurosurgeon Dr. Sanjay Gupta</p>
      </div>
      <img class="card-img-top mx-auto" src="https://dummyimage.com/100x50/fff/000&text=LOGO" style="max-width: 40%;" alt="World Health Organization">
    </div>

    <div class="card m-0 border-0">
      <div class="card-body">
        <p class="card-text tex-center">Dr. Esther Blessing, an associate professor of psychiatry at New York University says current evidence suggests that CBD shows promise for helping to treat everything from Anxiety to PTSD</p>
      </div>
      <img class="card-img-top mx-auto" src="https://dummyimage.com/100x50/fff/000&text=LOGO" style="max-width: 40%;" alt="The Washington Post">
    </div>
  </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

Doesn't seem like jQuery's .blur() is responsive on dynamically created fields

I am currently designing a login form that includes a registration form as well. Using jQuery, the email field is generated dynamically. The labels are positioned below the fields so that they can be placed inside the field. As the field gains focus or ha ...

Fixed position of the element within a parent stacking context

How can I ensure that the #icon appears below the #dropdown in the following example? https://i.stack.imgur.com/GoBcR.png The position: fixed of #container seems to be creating a new stacking context for its children. Changing the position value fixes th ...

Utilize HTML5 localStorage functionality

I have a good understanding of utilizing HTML5 localStorage with methods like localStorage.getItem/setItem. However, I am currently trying to figure out the implementation for a dynamic page. Let me explain the scenario: On my dynamic page (myPage.jsp), ...

Trouble with displaying HTML content on BrowserField in a BlackBerry device

After successfully solving the issue I posted here, it turns out that the problem was not with parsing, but rather in URL creation. :) Now a new challenge has arisen - the data obtained through parsing contains HTML tags. I attempted to display the HTML c ...

Utilizing Unicode characters within the content of a pseudo element in data-content

Is there a way to include unicode in the data-content attribute using JQuery for pseudo element content? I'm having trouble with the correct formatting. How can I properly display unicode characters? Currently, all I see is &#x25BC;. a::after { ...

Illuminate a corresponding regular expression within a text input

I currently have a functional code for testing regex, which highlights matching patterns. However, my challenge lies in highlighting the result within the same input as the test string. Below you will see the HTML and JavaScript snippets along with two ima ...

Error in Python Django when using the Post method: MultiValueDictKeyError

When a user chooses a color in a form, I should receive the value, but instead I get a MultiValueDictKeyError and I can't figure out why. This is the code in my views: def primeira_pergunta(request): trans = Tranfer() my_list = trans.shared[ ...

Exploring scraping capabilities in Node.js

Currently, I am in the process of developing a scraping engine using Node.js to collect data for my currency exchange graphs. I am utilizing request and cheerio for this task. However, due to some bank websites not following standard HTML practices by not ...

Tips for inserting a PHP array into an email communication

I have a question regarding sending emails through PHP. How can I include PHP arrays in the message section of an email? Here is a simple array that I created and attempted to include in the email, but it seems incorrect as I couldn't find any releva ...

Is there a way to modify the FixedTableHeader jQuery plugin to include a fixed first column in addition to the fixed header?

I've been experimenting with a jQuery plugin I found at to create a stylish table with fixed headers, sorting options, and other interesting features. While the plugin is great, I also considered using jqGrid for its impressive capabilities. However, ...

Bringing elements into perfect harmony in Angular

Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment. Goal is to center elements on screen one above the other. ...

Struggling to make the javascript function compatible with the drop-down menu

I'm encountering issues with making my JavaScript work properly alongside my HTML. Specifically, I want the "activity" drop-down box to function in conjunction with the "city" drop-down box. For instance, if I choose "Brisbane" and then select an acti ...

Tips for separating these two words onto two separate lines

I created this box using Angular Material, but I am having trouble breaking the words "1349" and "New Feedback" into two lines. Here's an image included in my design. Any tips on accomplishing this in Angular Material? Thank you! <style> . ...

Unfortunately, Node Sass does not have compatibility with your current environment, which is Windows 64-bit with an unsupported runtime

Having been a regular user of Node.js to utilize gulp and sass for my HTML projects, I recently encountered a new issue. An error message stating "Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (57)" has no ...

How can I retrieve and manipulate the text within an option tag of a form using JavaScript?

<select name="products"> <option value=""> - Choose - </option> <option value="01">table</option> <option value="02">chair</option> <option value="03">book</option> <option value= ...

What is the reason behind this button disrupting the arrangement of my design?

Whenever I attempt to add this customized CSS button to my company's website, it disrupts the center alignment of the entire webpage. Below is the HTML code: <div id="contain"> <button class="support"> </button> ​ Here is the c ...

Incorporating jQuery to Load Content into a DIV while preserving the original JavaScript

I am attempting to implement the following <script> $(document).ready( function() { var data = 'testing' $("#about").on("click", function() { $("#main-content").load("/about.html"); ...

Leveraging CSS and JQuery to manage an iframe with a programmed autoplay feature embedded within

My presentation was created using Adobe Presenter and inserted via an iframe with autoplay enabled upon publication. This means that as soon as the page loads, the presentation begins automatically along with the audio. Since I am unable to disable autopl ...

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

How to implement a modal popup in Vue.js using an anchor tag

As a newcomer to Vue.js, I'm facing an issue with creating a link in my navbar component that, when clicked, displays a modal component. I've noticed that the solutions I found are for buttons which use the data target attribute, but this isn&apo ...