Reputation: 4629

Display Image In middle over text

I am using bootstrap 4 and trying to make a component. The component has two tiles. Each tile consists of an icon image on left and on the right, there is a hyperlink. The desktop should show the tiles horizontally and vertically centered. As soon as the desktop changes to mobile, the image icon should stack over the link and vertically centered.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Service Header Example</title>
      <style type="text/css">
          .service-header-tile{
              max-width: 397px;
              height:60px;
          }
          
          .leftContent{
            float: left;
            width: 20%;
            clear:both;
          }
          
          .rightContent{
              float: left;width: 61%;height: auto;
          }
          
          @media only screen and (max-width: 767px){

              .leftContent{
                  width:100%;
                  height:auto;
                  float:none;
                  clear: both;
                  text-align: center;
              }

              
              .rightContent{
                  clear:both;
                  width:auto;
                  height:auto;
              }
          }          
      </style>
  </head>
  <body>
   
     <div class="container" style="background-color:#41173F">
      
      
        <div class="row">
         
         <div class="col-4 col-md-4">
            
             <div class="service-header-tile containeer">
             
                <div class="leftContent">
                   <picture>
                      <source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
                      <img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit "/>
                    </picture>
                </div>
                 
                <div class="rightContent">
                    <a href="#">Play Virtual Applications</a>

                </div>
                 
             </div>
             
           
         </div>
            
         <div class="col-4 col-md-4">
            
             <div class="service-header-tile container">
             
                <div class="leftContent">
                    <picture>
                      <source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
                      <img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit "/>
                    </picture>
                </div>
                 
                <div class="rightContent">
                    <a href="#">Play Virtual Applications</a>

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Though I am finding the following issues

I am not sure, how to vertically center the image on the text in mobile mode?
service-header-tile, is not acting as a parent of leFtContent and rightContent. When inspect the element, this div does not seem to have any width or height. What am I doing wrong?
Suggestions to improve the code

Thanks, Bee

Upvotes: 1

Answers (3)

Yousaf

Reputation: 29281

I am not sure, how to vertically center the image on the text in mobile mode?

you probably want center the image horizontally over the text. Use .text-center class on the parent element of the image or use flexbox utility classes provided by bootstrap such as .justify-content-center

service-header-tile, is not acting as a parent of leFtContent and rightContent. When inspect the element, this div does not seem to have any width or height. What am I doing wrong?

It is a parent element and it has fixed height of 60px that you have defined in the internal css. You need to remove that otherwise child elements will overflow the .service-header-tile element.

Suggestions to improve the code

remove internal css, use external css file if you want to override the styles provided by bootstrap.
remove all the css you have written because its not needed for what you are trying to achieve. Bootstrap has all the classes you need to achieve the desired layout.
use flexbox utility classes provided by bootstrap to align items properly. You can find these classes here

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="background: #41173F;">

  <div class="row">

    <div class="col-4 col-md-4">

      <div class="service-header-tile text-center d-flex flex-column flex-md-row align-items-center">
        <div class="leftContent mr-md-3">
          <picture>
            <source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
            <img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit " />
          </picture>
        </div>

        <div class="rightContent pb-2">
          <a href="#">Play Virtual Applications</a>
        </div>
      </div>

    </div>

    <div class="col-4 col-md-4">

      <div class="service-header-tile text-center d-flex flex-column flex-md-row align-items-center">
        <div class="leftContent mr-md-3">
          <picture>
            <source media="(max-width:767px)" srcset="https://i.postimg.cc/52LJtH2P/virtual-appoinment-m-icon-2x.png" />
            <img src="https://i.postimg.cc/rmJFwDQ6/book-appointment.png" srcset="https://i.postimg.cc/RV0qqLkg/book-appointment-2x.png 2x" class="stretch object-fit " />
          </picture>
        </div>

        <div class="rightContent pb-2">
          <a href="#">Play Virtual Applications</a>
        </div>
      </div>

    </div>

  </div>

</div>

Upvotes: 1