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="#">[email protected] </a></li>
<li class="hdr_call_icon">699 99 99 99</li>
</ul>
</div>
</div>
</div>
</div>