2

when i click on the card tabs, the whole page moves when switched over because of smaller height. I was able to make the card one whole size but it leaves white space under the footer and I don't think translates perfectly on mobile and other sizes of screen.

I've tried to make the position fixed, tried making the cards one size (that would work but I'm not sure ratio for other screen sizes and the footer wont rest at the bottom)

<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 want to make the cards switch tabs seamlessly with nothing moving or changing but the card contents

j08691
  • 204,283
  • 31
  • 260
  • 272
Ricky Jaime
  • 63
  • 6
  • I moved your code into jsfiddle, and the results there don't have the same issue. https://jsfiddle.net/nh0f4xva/. Can you post a fiddle where you can replicate the issue? – Saharsh Apr 18 '19 at 20:48
  • https://stackoverflow.com/questions/35868756/how-to-make-bootstrap-4-cards-the-same-height-in-card-columns helps? – UnpassableWizard Apr 18 '19 at 20:49
  • I think this is the link for it? I'm not used to using Jsfiddle https://jsfiddle.net/0r6y2s17/1/#&togetherjs=JyvOxUTIer – Ricky Jaime Apr 18 '19 at 20:53
  • @Rustyjim It's a no-go. I tried that last night but it just messes up the tab button sizing and spacing – Ricky Jaime Apr 18 '19 at 20:55
  • checkout the updated fiddle you posted, does that look good? In case you're not able to see changes, try this URL: https://jsfiddle.net/tswaumb6/ – Saharsh Apr 18 '19 at 20:59
  • @Saharsh yes! that's awesome. How did you do it? – Ricky Jaime Apr 18 '19 at 21:01
  • great! I added a height property to the .tab-pane class that all your cards are styled with. Please refer to the answer I posted below as well – Saharsh Apr 18 '19 at 21:06

2 Answers2

1

I added the following style to your CSS.

.tab-pane{
    height:359px;
}

This should finally reside inside @media sections, with proper pixel values according to the screens you will be targeting.

Saharsh
  • 750
  • 7
  • 18
0

I'd argue that flexbox and using min-height is better and future-proof in this case as it will respond much better than only setting a fixed height to the inner contents, because of the unknown size of the content your tabs, thus your initial problem.

.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;
}

You can also set a max-height to your container to work with your page layout.

grantmx
  • 106
  • 9