0

I'm building a website for a client and I am trying to keep text within a Bootstrap card. Everything else is working fine. The card is not resizing to encompass the text - but this problem only occurs on screen sizes of iPad and below. How do I fix this?

I have scoured the internet for answers, and I have tried adjusting word-wrap, padding, margin size. Is there something else that I can try?

<section class="container w-80">
            <div class="card col-4 bg-info mb-4 p-0"> 
            <img class="card-img img-fluid" src="assets/images/audience-black-and-white-blur-2014774.jpg" alt="Card image cap" style="opacity: 0.2">
                <div class="card-img-overlay m-1">
                    <blockquote class="blockquote card-text text-white">
                      <p class="card-text">“May the Lord send you help from the sanctuary and give you support from Zion! May He remember all your offerings and regard with favor your burnt sacrifices!”</p>
                      <p class="card-text float-right text-white">Psalm 20:2-3</p>
                    </blockquote>
                </div>
            </div>
            <div class="col-8 pb-4">
                  <h5 class="text-black-50">Our work of starting a conservative, biblically-sound, Reformed church-planting movement in the Bahamas is dependent on the financial support of partners like you.</h5>
            </div>
    </section>

thebigbadcaribwolf's Bootstrap Card Problem

thebigbadcaribwolf
  • 13
  • 5

2 Answers2

0

This is caused by your col-4 in card

This col-4 means that your enforcing a strict col-4 in every screen size

The better way is explicitly telling what col to use in every screen

col-lg-4 // for large devices
col-md-6 // for ipad and medium size devices
col-sm-8 // for smaller phone devices

Take a look at this fiddle https://jsfiddle.net/8shjr6gn/

Edit, if you are using the SASS boostrap, I recommend to also enable the responsive text feature of Bootsrap 4.3

Just set the

 $enable-responsive-font-sizes = true

and text will adjust accordingly to the screen size

Edit however if you use CDN and not the SASS, you can write something similar to this, to make the font size responsive

@media (min-width: 576px) { 
  .card-text{
    font-size:1rem;
  }
}

@media (max-width: 575.98px) {
 .card-text{
    font-size:.8rem;
  } 
}

@media (min-width: 768px) { 
  .card-text{
    font-size: 1rem;
  }
}

@media (min-width: 992px) { 
  .card-text{
    font-size: 1.8rem;
  }
}

@media (min-width: 1200px) { 
  .card-text{
    font-size: 2rem;
  }
}
keysl
  • 2,127
  • 1
  • 12
  • 16
0

Thank you so much for taking the time to answer! With your feedback, I figured out that this issue can be solved by specifying classes col col-md-X

Here's the final product on iPad & iPhone 5S: thebigbadcaribwolf's Bootstrap Card Solution!

And here's a Pen.

thebigbadcaribwolf
  • 13
  • 5