How can I adjust margins based on the positioning of surrounding elements?

Apologies if the title is not accurate, but I will try my best to explain clearly. If you have any ideas on how to improve it, please share, and I will make changes.

Here is the issue I am facing: https://i.sstatic.net/kGMjw.png

(I apologize for any language issues)

The problem I'm encountering is in a code based on bootstrap. While things appear fine on different devices, the headers have varying word counts. As a result, when resizing the screen, the lines break causing the header's height to increase, making the icon and paragraph shift downwards, which doesn't look very appealing. Is there a way to adjust the margin of the third paragraph and the icon based on the first column's header? Or any other method to enhance its appearance?

Thank you in advance :)

CSS:

   h6
   {
    font-size:0.95em;
    color:rgb(52, 73, 94);
    padding:0;  
    }

   .pad
   {
    padding:15px;   
   }

   #icon
   {
    width:60px;
    display:inline-block;
    }

   p4
   {
    color:rgb(136, 138, 140);
    text-transform:none;
    font-size:0.6em;
    font-weight:normal;
    display:inline-block;
    width:72%;
    vertical-align:top;
    padding-top:5px;
    max-width:474px;
    }

HTML:

    <div class="row">
        <div class="col-md-4 marg"> 
        <h6 class="pad"> First Aid Training </h6> <img src="images/doctor-suitecase-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4>       <div class="more"> Read more... </div>
        </div>
        <div class="col-md-4 marg"> 
        <h6 class="pad"> Documentation Creation </h6> <img src="images/text-file-5-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4>    <div class="more"> Read more... </div>
        </div>

        <div class="col-md-4 marg"> 
        <h6 class="pad"> Quality Control <br> </h6> <img src="images/workers-64.png" id="icon"> <p4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.  </p4> <div     class="more"> Read more... </div>
        </div>
    </div>
jqueryhtmlcsstwitter-bootstrap

Answer №1

Here is the perfect solution for your specific situation

HTML Code

<div class="row">
    <div class="col-sm-4 marg"> 
        <h3 class="pad1"> First Aid Training</h3>
        <img src="images/doctor-suitecase-64.png" id="icon">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p>
        <div class="more"> Read more... </div>
    </div>
    <div class="col-sm-4 marg"> 
        <h3 class="pad2"> Documentation Creation</h3>
        <img src="images/text-file-5-64.png" id="icon">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p>
        <div class="more"> Read more... </div>
    </div>

    <div class="col-sm-4 marg"> 
        <h3 class="pad3"> Quality Control</h3>
        <img src="images/workers-64.png" id="icon">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum ante ut commodo lacinia. Aliquam id felis faucibus, mollis tortor vitae, mollis ante.</p>
        <div class="more"> Read more... </div>
    </div>
</div>

jQuery Script

<script type="text/javascript">
        $(window).resize(function () {
            var heig1 = $(".pad1").height();
            var heig2 = $(".pad2").height();
            var heig3 = $(".pad3").height();
            var largestHeight = Math.max(heig1, heig2, heig3);
            if(largestHeight == heig1){
                $(".pad2,.pad3").height(largestHeight);
            }
            else if(largestHeight == heig2){
                $(".pad1,.pad3").height(largestHeight);
            }
            else{
                $(".pad1,.pad2").height(largestHeight);
            }
        });
</script>

Answer №2

If you're facing a problem with layout, I suggest delving into flexbox as it could provide a solution. Flexbox offers properties like flex-grow, flex-shrink, and flex-basis (or the shorthand, flex) that may resolve the issue at hand. I found it helpful when dealing with a similar situation.

Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №3

Take a look at this fiddle

To properly utilize bootstrap grids, all you need to do is:

Example HTML

<div class="col-sm-4">
    <div class="row">
        <div class="col-md-2"><span class="glyphicon glyphicon-briefcase"></span></div>
        <div class="col-md-10">
            <h3>This heading is something I truly adore</h3>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
        </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

Having trouble retrieving the JSON data received from the backend

After making an AJAX request, I receive a response which is then saved to a data variable. This is the controller logic: def retrieve data = params[:data] @question = Question.find_by(id: params[:question_id]) @choices = @question.choices results ...

jqueryruby-on-railsjsonajaxruby-on-rails-4

The combination of $.post and $J = jQuery.noConflict() does not seem to be functioning correctly

I'm struggling with sending data from JavaScript to PHP using the $.post method, while also having conflicts with WordPress and using $J = jQuery.noConflict(). Here's what I have in my JavaScript: $J = jQuery.noConflict() x=1 $J.post('/the ...

javascriptphpjquerywordpresspost

I am attempting to restrict a text box so that it can only accommodate 4 digits

I have successfully implemented a restriction on a text box to allow only a maximum of 4 digits, along with an alert message if the length is less than 4. The code I used is as follows: <tr> <td id="ExamNumber">ExamNumber </td> ...

javascripthtml

Python code that extracts data from an AJAX website

Looking to scrape a website that includes a directory of individuals and their details. The issue arises when the site uses ajax to load new information as I continue scrolling down. I'm in need of data for every single person on the list. The urllib ...

jquerypythonajax

What is the origin of the trailing commas seen in these radio button choices?

After closely examining my radio buttons, I noticed a strange issue - there is an unexpected trailing comma after each option. Strangely, I did not add these commas in the template and I cannot figure out where they are coming from. Initially, I suspected ...

javascripthtmlcss

A problem with Internet Explorer 8 when using jQuery slide animations

Hey there! Check out this link for the issue.. Here's what it says: SCRIPT5007: 'toLowerCase' Unable to get value of property: the object is empty or undefined..jquery.slider.min.js, line 398.. I'm not familiar with jquery. Any sugg ...

jqueryasp.netinternet-explorerinternet-explorer-8slide

Removing the pound sign from the URL in location hash

function updateView(category) { console.log( window.location.hash ); if (location.hash !== ""){ //convert #3 to 3. //load video based on id //myArray[sanitizedHash]; } else { updateCategoryLabel(category); currentList = updateVi ...

javascriptjqueryhtmlarraysfragment-identifier

Why is the label on my styled checkbox shifting position?

While custom styling a checkbox, I'm facing an issue where the label next to it keeps shifting. When unchecked, it aligns itself at the bottom of the box, but upon checking, it moves to center align with the box. .check { width: 100%; font-we ...

htmlcsscheckbox

Why doesn't jQuery ajax work when sourcing the URL from a variable but works with a hard-coded URL?

During my experimentation with setting and getting the URL for a jQuery Ajax (post) call, I realized the value of dynamically setting the destination URL for the request. Here's how I attempted to achieve this: To set the URL to 'store.php' ...

javascriptphpjqueryajax

What is the best way to display a page within a div when clicking in Yii?

I'm trying to use the jQuery function .load() to load a page into a specific div. Here's my code: <a href="" onclick="return false;" id="generalinfo"> <div class="row alert alert-danger"> <h4 class="text-center">Gen ...

javascriptphpjqueryhtmlyii

Ways to position divs without causing them to collapse or override existing divs

I am currently developing a demonstration in which users can select jQuery areas to create square blocks. When a user selects an area and adds a comment with color, the entire block is displayed at a specific position. This feature is working perfectly as ...

javascriptjqueryhtmlcssjquery-ui-selectable

Tips for aligning audio and text files using JavaScript:

After displaying text below the video as subtitles, I'm now looking to synchronize the text with the video. Any ideas on how to highlight the text as the video plays? ...

javascriptjqueryhtmltemplates

`flex display is not responsive to justify and align content and items properly`

I'm facing an issue with aligning the .contact and .subscription divs in the footer. While the .contact div justifies itself at flex-start, the .subscription div isn't justifying at the flex-end as expected. I've tried using justify-con ...

htmlcssflexboxbootstrap-5

How can I center-align a form in BootStrap?

I am wondering how to center-align a form using bootstrap. Here is the code I have: <body> <div class="p-3 mb-2 bg-light text-dark container text-center"> <h2>Reservation for Aljaz Apartment</h2> <br> <br& ...

htmlcssbootstrap-4

Strategizing the incorporation of a border bottom implemented with an hr tag

I am attempting to create something that looks like this: https://i.sstatic.net/XXwFg.png However, my current implementation only results in this: https://i.sstatic.net/a8f6u.png Below is the code I have been using: <div class="col-md-12" ...

htmlcssbootstrap-4laravel-blade

Retrieve all elements from an array using jQuery

How do I extract all the elements from the array outside of the function? $.each(Basepath.Templates, function(i){ templateArray = new Array({title: Basepath.Templates[i].Template.name, src: 'view/'+Basepath.Templates[i].Template.id, descri ...

javascriptjqueryarrays

Using the OR selector in a complex selector with jQuery

I am currently working on modifying a selector that locates every 6th product_tile element, then drills down to the child div with the tile_back class, and finally targets the select box with the name crust. However, I now need this selector to also includ ...

jqueryjquery-selectors

Rotate the image using the handler, not by directly manipulating the image itself

I need help rotating the image using a handler instead of directly on the image itself. I do not want to rotate the image when clicking and rotating it directly. Please do not suggest using Jquery UI rotatable because resizing the image with Jquery UI resi ...

javascriptjquerycssimagerotation

CSS issue: Font size

Can someone help me out with a CSS issue that has been tripping me up? I've been working with CSS for three years now, and this particular problem is stumping me. I have defined some styles in my CSS file that should be applied to the content of my w ...

htmlcsswordpress

When clicking on the dropdown items of another button, the class of the child element in the Bootstrap button dropdown is being removed

Check out the JSFiddle for this code snippet. I'm attempting to implement Bootstrap's drop-down menu using list items instead of options. When a list item is selected, the data should be retrieved and displayed as an active selection within a bu ...

javascriptjqueryhtmlcsstwitter-bootstrap