How to put all the text on a line?

1

Hello, I have a section in the header of the page, above the navigation bar, where I show the name of the company on the left, and the email and phone on the right. When I increase the text size of the electrode mail, this causes the telephone number to be passed to the line below. I have modified the css, reducing the padding-letf , but the only thing I get is that the text is added to the icon. I can not find a way to move the mail icon to the left.

EDIT: At the request of a colleague, showing images in which on the right-hand side above, is what gives me the problems

I show you captures: I add an image of how the text is now:

And now another capture of how it should still be with the text as long as in the first image. That's how it should look:

I show part of the code that I hope is enough for you to give me some idea. Thanks.

.hdr_top_bar {
    background: #33381e;
    padding: 8px 0px 9px;
}
.hdr_top_bar.hdr_top_bar_var2 {
    background: rgba(0, 0, 0, .4);
    padding: 11px 0px 12px;
}
.hdr_top_bar.hdr_top_bar_var3 {
    background: none;
    border-bottom: 1px solid #776250;
    padding: 7px 0px;
    margin-bottom: 7px;
}
.landing_gardening_txt {
    font-size: 18px;
    color: #7f9a48;
    font-style: italic;
    float: left;
    margin: 3px 0px;
}
.landing_gardening_txt.land_garden_txtvar2 {
    color: #fff;
}
.hdr_cnt {
    float: right;
}
.hdr_cnt ul {
    margin: 1px 0px 0px;
    padding: 0px;
    float: right;
}
.hdr_cnt ul li {
    float: left;
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: #abb488;
    margin-right: 28px;
    line-height: 29px;
}
.hdr_cnt ul li.cnt_white_color {
    color: #a2a4a5;
}
.hdr_cnt ul li:last-child {
    margin-right: 0px;
}
.hdr_cnt ul li a {
    color: #abb488;
    text-decoration: none;
}
.hdr_cnt ul li a.cnt_white_color {
    color: #fff;
}
.hdr_cnt ul li.var3_white {
    color: #fff;
}
.hdr_cnt ul li a.var3_white {
    color: #fff;
}
.hdr_msg_icon {
    background: url(../images/common_in_all/msg_icon.png) no-repeat 0px 6px;
    padding-left: 42px;
    font-size: 16px;
}
.hdr_call_icon {
    background: url(../images/common_in_all/call_icon.png) no-repeat 0px 6px;
    padding-left: 34px;
    font-size: 18px;
}
.hdr_msg_icon.white_msg_icon {
    background: url(../images/common_in_all/white_msg_icon.png) no-repeat 0px 6px;
}
.hdr_call_icon.white_call_icon {
    background: url(../images/common_in_all/white_call_icon.png) no-repeat 0px 6px;
}
.hdr_top_variation4 {
    background: url(../images/common_in_all/main_header_bg.jpg) repeat-x bottom #fff;
    border-top: 3px solid #7fa319;
    position: relative;
}
.hdr_top_variation4 ul li::after {
    display: none
}
.hdr_top_variation4 ul {
    margin: 25px 0px;
    padding: 0px;
    float: right;
}
.hdr_top_variation4 ul li {
    list-style: none;
    float: left;
    padding-left: 48px;
    position: relative;
    padding-right: 22px;
    margin-right: 22px;
    padding-top: 4px;
    padding-bottom: 4px;
}
    <div class="hdr_top_bar">
      <div class="container">
        <div class="row">
          <div class="col-lg-5 col-md-6 col-sm-5 col-xs-12 mobile_none"><span class="landing_gardening_txt">JARDINESS Y IMPIEZAS DE TODO</span></div>
          <div class="col-lg-5 col-md-6 col-sm-7 col-xs-12 hdr_cnt">
            <ul>
              <li class="hdr_msg_icon"><a href="#">jardinesylmpiezasmmmddddd@gmail.com </a></li>
              <li class="hdr_call_icon">699 99 99 99</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
asked by Miguel Espeso 19.11.2018 в 23:39
source

1 answer

2

If I did not understand you wrong, it's what you want to achieve. I just corrected the dimensions of the columns. Leaving col-md-6 to get on the medium or larger screens occupy half of the line or "row" as you want to call. In the rest of the screens (xs or sm) they will show one below the other. I think the most orderly. Greetings!

Edited: I edited the size of the columns, assigning only 4 columns for the title and 8 columns for the data.

.hdr_top_bar {
    background: #33381e;
    padding: 8px 0px 9px;
}
.hdr_top_bar.hdr_top_bar_var2 {
    background: rgba(0, 0, 0, .4);
    padding: 11px 0px 12px;
}
.hdr_top_bar.hdr_top_bar_var3 {
    background: none;
    border-bottom: 1px solid #776250;
    padding: 7px 0px;
    margin-bottom: 7px;
}
.landing_gardening_txt {
    font-size: 18px;
    color: #7f9a48;
    font-style: italic;
    float: left;
    margin: 3px 0px;
}
.landing_gardening_txt.land_garden_txtvar2 {
    color: #fff;
}
.hdr_cnt {
    float: right;
}
.hdr_cnt ul {
    margin: 1px 0px 0px;
    padding: 0px;
    float: right;
}
.hdr_cnt ul li {
    float: left;
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: #abb488;
    margin-right: 28px;
    line-height: 29px;
}
.hdr_cnt ul li.cnt_white_color {
    color: #a2a4a5;
}
.hdr_cnt ul li:last-child {
    margin-right: 0px;
}
.hdr_cnt ul li a {
    color: #abb488;
    text-decoration: none;
}
.hdr_cnt ul li a.cnt_white_color {
    color: #fff;
}
.hdr_cnt ul li.var3_white {
    color: #fff;
}
.hdr_cnt ul li a.var3_white {
    color: #fff;
}
.hdr_msg_icon {
    background: url(../images/common_in_all/msg_icon.png) no-repeat 0px 6px;
    padding-left: 42px;
    font-size: 16px;
}
.hdr_call_icon {
    background: url(../images/common_in_all/call_icon.png) no-repeat 0px 6px;
    padding-left: 34px;
    font-size: 18px;
}
.hdr_msg_icon.white_msg_icon {
    background: url(../images/common_in_all/white_msg_icon.png) no-repeat 0px 6px;
}
.hdr_call_icon.white_call_icon {
    background: url(../images/common_in_all/white_call_icon.png) no-repeat 0px 6px;
}
.hdr_top_variation4 {
    background: url(../images/common_in_all/main_header_bg.jpg) repeat-x bottom #fff;
    border-top: 3px solid #7fa319;
    position: relative;
}
.hdr_top_variation4 ul li::after {
    display: none
}
.hdr_top_variation4 ul {
    margin: 25px 0px;
    padding: 0px;
    float: right;
}
.hdr_top_variation4 ul li {
    list-style: none;
    float: left;
    padding-left: 48px;
    position: relative;
    padding-right: 22px;
    margin-right: 22px;
    padding-top: 4px;
    padding-bottom: 4px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 
 
 <div class="hdr_top_bar">
      <div class="container">
        <div class="row">
          <div class="col-md-4 mobile_none"><span class="landing_gardening_txt">JARDINESS Y IMPIEZAS DE TODO</span></div>
          <div class="col-md-8 hdr_cnt">
            <ul>
              <li class="hdr_msg_icon"><a href="#">jardinesylmpiezasmmmddddd@gmail.com </a></li>
              <li class="hdr_call_icon">699 99 99 99</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
answered by 20.11.2018 / 00:50
source