locked
phone image and email image and its link text is not coming just beside to the image and on the same line RRS feed

  • Question

  • User-1355965324 posted

    I am trying to show the telephone number link in an anchor tag just beside of its fa fa-phone phone image and Email link just beside of envelop image. But not working My code given below, I want to show the the link to the phone and email should be shown just close and left side to the image

    https://jsfiddle.net/9c3mnfr6/

    With  Thanks

    Pol

    Sunday, December 15, 2019 2:44 PM

Answers

  • User665608656 posted

    Hi polachan,

    Based on the code you provided, I tested it in my vs, you can change the Page Content Holder code like this:

     <!-- Page Content Holder -->
            <div id="content">
                <div class="header" id="myHeader">
                    <div class="row">
                        <div class="col-xs-1 col-sm-1 col-md-1 text-left">
                            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span></span>
                            </button>
                        </div>
                        <div class="col-xs-9 col-sm-9 col-md-7 text-center" style="color: white">
                            <h4>My Company Ltd</h4>
                        </div>
                        <div class="col-md-4  text-right">
                            <div class="col-md-6 ">
                                <a href="tel:4324434" style="font-size: 1.5rem; text-decoration: none; color: white">
                                    <i class="fa fa-phone">&nbsp;<span style="color: black">32424324</span>
                                    </i>
                                </a>
                            </div>
                            <div class="col-md-6">
                                <a href="ppp@gmail.com" style="font-size: 1.3rem; text-decoration: none; color: white">
                                    <i class="fa fa-envelope" style="color: #fff;">&nbsp;<span style="color: black">ppp@gmail.com</span>
                                    </i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div> 

    And in your style css, you should remove the header fixed height to show phone number and email when you use a mobile phone to view it:

          .header {
                overflow: hidden;
                background-color: #a81323;
                padding: 20px 10px;
                /*height: 118px;*/
            }
    

    I recomment you to learn how to make the interface adaptive on different screen sizes :

    https://getbootstrap.com/docs/3.4/css/#grid-example-mixed

    Here is the result of this code :

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 16, 2019 8:58 AM

All replies

  • User665608656 posted

    Hi polachan,

    Based on the code you provided, I tested it in my vs, you can change the Page Content Holder code like this:

     <!-- Page Content Holder -->
            <div id="content">
                <div class="header" id="myHeader">
                    <div class="row">
                        <div class="col-xs-1 col-sm-1 col-md-1 text-left">
                            <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span></span>
                            </button>
                        </div>
                        <div class="col-xs-9 col-sm-9 col-md-7 text-center" style="color: white">
                            <h4>My Company Ltd</h4>
                        </div>
                        <div class="col-md-4  text-right">
                            <div class="col-md-6 ">
                                <a href="tel:4324434" style="font-size: 1.5rem; text-decoration: none; color: white">
                                    <i class="fa fa-phone">&nbsp;<span style="color: black">32424324</span>
                                    </i>
                                </a>
                            </div>
                            <div class="col-md-6">
                                <a href="ppp@gmail.com" style="font-size: 1.3rem; text-decoration: none; color: white">
                                    <i class="fa fa-envelope" style="color: #fff;">&nbsp;<span style="color: black">ppp@gmail.com</span>
                                    </i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div> 

    And in your style css, you should remove the header fixed height to show phone number and email when you use a mobile phone to view it:

          .header {
                overflow: hidden;
                background-color: #a81323;
                padding: 20px 10px;
                /*height: 118px;*/
            }
    

    I recomment you to learn how to make the interface adaptive on different screen sizes :

    https://getbootstrap.com/docs/3.4/css/#grid-example-mixed

    Here is the result of this code :

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 16, 2019 8:58 AM
  • User-1355965324 posted

    Many Many Thanks

    Monday, December 16, 2019 9:05 AM