Bootstrap 3 card-wide responsiveness to different screen sizes

Question

I have created a Bootstrap 3 card-wide, and set the div class="card-wide-image-wrap" to a min-width of 50%. This ensures correct display on my laptop (otherwise it won't show the full image with overlay text-block). However, a min-width of 50% for the div messes up how the card is displayed on a mobile phone (Images below). Is there a way to fix this?

A second question: for every line of text that is added on the right, the image on the left seems to become enlarged. Can the image somehow be separated from the text side of the card so that it stays fixed?

The image below is the wanted result on a PC/large screen. I get this when I set the div min-width to 50%.

However, as seen in image below, this does not show up well on a mobile phone: If I omit the div min-width 50%, I get the following unwanted result on PCs/large screens:

However, it then displays correctly on a mobile device:

Here is my code. Thanks Ric:

 <style>

 p {
 color: white;
 }

 h2.ex1 {

 padding-left: 30px;
 }

 ul.ex1 {

 padding-left: 60px;
 }

 p.ex1 {

 padding-left: 30px;
 }

 h6.ex2{

 font-size: 22px;
 }


 .text-block {
  position: absolute;
  bottom: 80px;
  right:370px;

  background-color: #292929;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  block-size: max-content;

  }

  .cover {
  object-fit: cover;
  width: 10px;
  height: 10px;
  }


   div img{
   min-width:100%;
   min-height:100%;
   height:auto;
   position:relative;
   top:50%;
   left:50%;
   transform:translateY(-50%) translateX(-50%);
   }

   </style>



   <p style="text-align: center;"><br></p><div><div class="col-xs-12">
   <div class="calcite-web">
      <div class="card-base card-wide" style="background: #292929;max-width: 100%; margin: 0 auto;">
   
        <div class="card-wide-image-wrap" style="min-width:50%">
          <img alt="hurricanes" class="card-wide-image cover img-fluid" src="#">
             <div class="text-block">
               <h6 class="ex2" style="text-align: left; color: rgb(38, 149, 188);">Naturkræfter</h6> 
               <p style="text-align: left; color: rgb(38, 149, 188);">Cykloner i den nordlige og 
                sydlige hemisfære, adskilt af ækvator, hvor corioliskraften er 0,&nbsp; &nbsp;og 
                derfor forhindrer hvirvelvindene i at formes og krydse ækvatorlinjen</p>
             </div>
 
         </div>



         <div class="card-content px-2">
          <h2 class="ex1" style="color: white" id="intro">Lorem Ipsum</h2>
           <br>
          <p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            exercitation ullamco laboris nisi ut aliquip ex ea</p>
             <br>
               <ul class="ex1" style="color: white">
                 <li>Duis aute irure dolor in </li>
                 <li>Eprehenderit in voluptate velit esse cillum </li>
                 <li>Dolore eu fugiat nulla pariatur</li>
                 <li>Excepteur sint occaecat cupidatat non proident</li>
                 <li>Csunt in culpa qui</li>
                 </ul>
                 <br>
 
                  <p><a href="#" class="btn btn-primary" style="min-width: 114px; margin-left: 25px" 
                      target="_blank">Send os en besked</a></p>
                   <br>
        
             </div>
          </div>
       </div>
    </div>
</div>

score 0 · Accepted Answer · edited Jun 21 '20 at 18:29

0

You mentioned that you are using Bootstrap 3, but your img tag uses img-fluid class while it should be using img-responsive class.

<img alt="hurricanes" class="card-wide-image cover img-responsive" src="#">

In addition, I presume your CSS definitions for card-wide are driven by some template? Bootstrap3 inherently lacks cards and uses panels.

edited Jun 21 '20 at 18:29

Ric

75
1
8

answered Jun 21 '20 at 16:17

JALO - JusAnotherLivngOrganism

1,236
1
13
27

Thanks for pointing that out. I have changed it to img-responsiveness, but the problem still persists because the image wrapper is set to a min-with of 50%. However, you are also right that I have taken a template and adapted it -I thought it was a Bootstrap template -but I just realised that it is a template from a custom theme by ESRI that is based on Bootstrap 3, so maybe I am posting my question in the wrong place?! I am quite new to the world of css, html, etc, som I am still fumbling my way through – Ric Jun 21 '20 at 17:44
If you are using the img-responsive class, avoid any external CSS for the img tag. For your case, it's pretty hard to debug without having the reference to the CSS/JS used by the template. Also, if the img-fluid class came from the template, they might have defined it somewhere or they are probably using bootstrap4. – JALO - JusAnotherLivngOrganism Jun 21 '20 at 18:35
Thanks that is good to know -and has probably just saved me lots of time :) – Ric Jun 21 '20 at 19:01

Bootstrap 3 card-wide responsiveness to different screen sizes

1 Answers1