What is the best way to ensure that cards are uniform in height across all screen sizes while keeping the footer pinned to the

When I click on the card tabs, the entire page shifts due to differences in height. I attempted to adjust the size of the cards, but this approach resulted in white space below the footer and did not display correctly on mobile devices or screens of varying sizes.

I experimented with using fixed positioning and adjusting the size of the cards (which worked to prevent shifting, but posed challenges for maintaining correct proportions across different screen sizes).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row d-flex align-items-stretch">

  <div class="container wholecard" id="studiocity">

    <div class="card col-8 col-lg-6 col-xl-6" style=" float: left; ">
      <div class="card-body stud" style="padding: 0; padding-top: 1em;">

        <div class="tab-content" id="myTabContent" style="">

          <div class="tab-pane fade show active" id="studhours" role="tabpanel" aria-labelledby="studhours-tab">

            <img src="http://ricktology.com/roccos/sc.jpg" class="card-img-top" style="width:100%">
            <u><h4 class="card-title" style="text-align: center; font-family: fugaz-one; font-style: normal; font-weight: 400; margin-bottom: 0;">Studio City</h4></u>
            <div class="container cheers" style="text-align: center;">
              <p class="card-text" style="font-family: 'fugaz-one'; font-size: 2em; color: #d40000; text-align: center; margin-bottom: 0;">HAPPY HOUR</p>
              <b><span class="cardtext">EVERYDAY : 11am - 7pm <br> SUNDAY : 3pm-7pm 
<br> LATE NITE : 10pm - 1:30am</span></b><br><br>
            </div>
          </div>

          <div class="tab-pane fade studtab" id="studlocation" role="tabpanel" aria-labelledby="studlocation-tab">


            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3302.145205107502!2d-
118.40797598529815!3d34.14262702040996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1 
!3m3!1m2!1s0x80c2bdf08bc8b0cf%3A0x15b17538f491d082!2sRocco&#39;s+Tavern!5e0!3m 
2!1sen!2sus!4v1549432245207" frameborder="0" allowfullscreen></iframe>

            <p class="cardtext" style="font-size: 12px">
              Address: 12514 Ventura BLVD <br> Studio City, CA 91604</p>
            <br><br><br>
            <p class="cardtext">Phone: 818-986-9876</p>
            <br>


          </div>

          <div class="tab-pane fade" id="studsocial" role="tabpanel" aria-labelledby="studsocial-tab">

            <p class="cardtext">Social Media</p>
            <a href="https://www.instagram.com/roccostavern"><i class="fab fa-instagram btn btn"></i></a>
            <a href="http://facebook.com/roccostavern/"><i class="fab fa-facebook-square btn"></i></a>
            <a href="http://twitter.com/roccostavern"><i class="fab fa-twitter-square btn"></i></a><br>

            <br><br>
            <p class="cardtext">Delivery</p>

            <a href="https://www.grubhub.com/restaurant/roccos-tavern-12514-ventura-blvd-los-angeles/139412">
              <input type="image" src="https://cdn6.aptoide.com/imgs/9/d/9/9d94afe3d75c9dd1ccb26191812a666f_icon.png?w=256" /></a>
            <a href="https://www.ubereats.com/en-US/los-angeles/food-delivery/roccos-tavern-studio-city/O0w0qVubRS-mwpMQxg3c4A/"><input type="image" src="http://blueagavemadison.com/wp-content/uploads/2018/11/app-icon-a2654f7eee.png" /></a>
            <a href="https://postmates.com/merchant/roccos-tavern-studio-city-2"><input type="image" src="http://ricktology.com/roccos/postmatesicon.png" /></a>
            <a href="https://www.doordash.com/store/rocco-s-tavern-los-angeles-87376/"><input type="image" id="dd" src="https://apkreal.com/wp-content/uploads/2017/08/DoorDash%20Order%20Manager-image.png" /></a>

            <p class="spacing;" id="spacing;"><br></p>


          </div>



          <div class="container card-footer" style="padding: 0; vertical-align: bottom;">

            <ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="studhours-tab" data-toggle="tab" href="#studhours" role="tab" aria-controls="studhours" aria-selected="true">Hours</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" id="studlocation-tab" data-toggle="tab" href="#studlocation" role="tab" aria-controls="studlocation" aria-selected="false">Location</a>
              </li>

              <li class="nav-item">
                <a class="nav-link" id="studsocial-tab" data-toggle="tab" href="#studsocial" role="tab" aria-controls="studsocial" aria-selected="false">Apps</a>
              </li>
            </ul>
          </div>

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

    <!--<div class="hidden">-->
    <img src="http://ricktology.com/roccos/V2/pretz1.png" class=" mydiv col-2 col-lg-2 col-xl-2" id="pretz">

  </div>

</div>

<br><br><br>

I aim to create a seamless transition between card tabs without any noticeable movement or changes aside from the content within the cards

htmlcssbootstrap-4

Answer №1

I incorporated the style below into your CSS file.

.tab-pane{
    height:359px;
}

Make sure to place this code snippet within @media sections, adjusting the pixel values accordingly for the specific screen sizes you are targeting.

Answer №2

In my opinion, utilizing flexbox along with implementing min-height is a more effective and forward-thinking approach in this scenario. It offers better responsiveness compared to simply specifying a fixed height for the inner content, especially considering the unpredictable size of your tab contents which led to the original issue.

.tab-content{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 450px;
  justify-content: center;
  align-self: center;
}

.tab-pane{
  flex: 1;
}

An additional suggestion is to assign a max-height to your container to ensure compatibility with your overall page layout.

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

Passing label id as a parameter in ng-init in AngularJS

I am currently learning AngularJS and working on a project that involves fetching label names from a database. The challenge I am facing is how to pass a label id as a parameter and retrieve the corresponding label name. Ideally, I would like this process ...

htmlangularjs

Transitioning the color of links in Firefox causes flickering when switching between the hover and visited state

I have been working on testing this code snippet in Firefox 49.0 on Linux Mint: a{ font-size:50px; color:gray; font-weight:1000; transition:color 1s; } a:hover{ color:black; } a:visited{ color:lightgray; } <a href="">VISITED LINK</a>&l ...

cssfirefox

When it comes to creating a CSS drop-down menu, don't forget to incorporate an additional <ul

I've created a drop-down menu using CSS with 5 visible list items. When hovering over one of the list items, it highlights and triggers a drop-down effect to display another list underneath. Essentially, you have an initial set of options, and upon ho ...

htmlcss

Only send file input to the server when it is changed, and disregard any other inputs until the form is submitted

I am working with a form structured like this: <form method="post" action=""> <input type="text" onchange="uploadFile()" name="username"> <textarea name="description">< ...

htmlajaxformsinput

What could be causing the additional space in this div? Any suggestions on how to resolve it?

In a mock project, there seems to be extra space at the bottom of this element. https://i.sstatic.net/3s52c.jpg I've reviewed the code thoroughly but I'm unable to pinpoint where the mistake lies. Can someone assist in identifying the error? H ...

htmlcssflexboxmargin

Stripping initial tags from an xml string using PHP

My URL is: http://lx2.loc.gov:210/lcdb?operation=searchRetrieve&recordSchema=marcxml&version=1.1&maximumRecords=10&query=bath.isbn%3D9781594634123%0A++++ This URL returns an xml string, and I am looking to remove the opening tags of this ...

phphtmlxmlwebextract

Which method is better for HTML5/JavaScript GeoLocation: Passing data to a callback function or suspending an async call using promises?

Trying to figure out how to utilize HTML5/Javascript Geolocations effectively for passing location data to an ajax call and storing it in a database. The main challenges I'm facing are the asynchronous nature of the Geolocation call and issues with va ...

javascriptajaxhtmlasynchronousgeolocation

What is the best way to make a table fill 100% of the available height

Is this a Repetitive Question? How to stretch an HTML table to 100% of the browser window height? Just like the title says, I am looking for a way to make my table element stretch to 100% height even when the content does not entirely fill the page&ap ...

htmlcss

Issue with footer display while utilizing Bootstrap's cover template

When I utilize the Bootstrap cover template, I encounter an issue where if I resize the window to a smaller level or include enough text to require scrolling, the footer background color turns into a solid color. This is also visible in the template I am u ...

htmlcsswebbootstrap-4

Don't leap to the top of the page, take your time!

This is the question I have posed <a href="#" onclick="return false">show_all</a> I attempted onclick=preventDefault(); onclick="return false"; However, it is continuing to jump to the top of the page. Any recommendations on how to pr ...

javascripthtml

Stuck on using floats and fixed positioning in CSS, can't seem to crack the code

I am working on a mobile website project and I am in need of a fixed navigation bar that has a specific look... Unfortunately, my attempts at using fixed positioning to achieve this have not been successful. Instead of getting the desired result, all the ...

htmlcsscss-floatcss-position

AngularJS HTTP POST request encountering issue with success function not functioning as expected

I am currently working on implementing a basic HTTP post request to insert data into my database. The following pages are involved: register.php contains the registration form. maincons.js houses the application controllers. sqlregister.php include ...

javascriptphphtmlangularjs

Utilizing IcePDF or PDFBox for converting PDF files into HTML web pages

I am interested in extracting content from PDFs using either IcePDF or PDFBox. However, I am unsure of how to proceed with converting the extracted text and images into HTML web pages. ...

htmlpdfpdfboxicepdf

The ease of use and availability of radio buttons

When clicking on the first or second value of the radio button, it selects the first option. Here is the HTML code: @supports(-webkit-appearance: none) or (-moz-appearance: none) { input[type='radio'], input[type='checkbox'] { ...

htmlcss

The Parent Div is styled with a background color, and I would like the sub div to inherit the background from whatever is behind the

I have a website at . When you click on a blue tab (except the middle left one), a larger tab appears with two Divs inside. What I am trying to achieve is having the sub divs show what's behind the green Div, especially while it's in motion. This ...

htmlcssbackgroundtransparency

Set the style properties of one class to match the style properties of another class using JavaScript

I need to dynamically create a div using the Bootstrap panel for displaying it. The div's class will either be "panel panel-success" or "panel panel-danger" based on the server response, which can be either "success" or "failure." To assign the class ...

javascripthtmlcsstwitter-bootstrap

Flask Pagination : UnboundLocalError occurs when trying to reference a local variable 'res' before it has been assigned

I'm currently troubleshooting an issue with flask pagination. Whenever I attempt to implement it, I encounter the UnboundLocalError. Even after removing all variables, the pagination feature still fails to function as intended. @app.route('/&apos ...

pythonhtmlmysqlflaskjinja2

Gradient in Half Circle With JavaScript

How can I achieve a gradient effect within a circle using the following initial code: HTML: <div class="progresss"> <div class="barOverflow"> <div class="bar"></div> </div> <span>10</span>% </d ...

javascriptjqueryhtmlcss

Guide to selecting HTML components from an Angular service

Within my app.component, I have integrated a component called comp1. The HTML file for comp1.component.html contains buttons defined as follows: <button #myButton (click)='function()'> Temporary </button> <button #myButton2 (click ...

htmlangularrxjs

What is the best way to showcase images from a local directory in an HTML div element?

I have a few JPEG images located in the directory "C:/images/". I want to create a slideshow of these images on a webpage. I am using Java code to retrieve the correct path of the image folder and JSP as the front end with an HTML div element to display th ...

javascriptcsshtml