text wraping strangely on list

hi guys,
checking in my mobile I noticed a problem in my site lists for mobile.

https://pasteboard.co/aqkJh7Yip.png

this is suddenly happening all over my site. it was not happening before. can you help?

http://hairstylehub.com/

note that it is like that from the phone, in tools like mobiletest.me show ok.

Thank in advance!

just added it, but is not working… this is all my cusom code just in case

.td-blog-beauty .td-post-template-default
.td-crumb-container {
display: block;
}

.td-header-sp-logo { background-color: #ffffff; }

.td-left-smart-list {
font-size: 20px; color: #658ae1
}

.td-right-smart-list {
font-size: 20px; color: #658ae1
}

.td-sml-current-item-nr {
background-color: #658ae1;
}

.td_smart_list_2 .td-sml2-description p{
font-size: 17px; }

.td-smart-list-button {
background-color: #ffffff;
}

.td-left-smart-list, .td-right-smart-list {

background-color: white;}

.td-left-smart-list:hover, .td-right-smart-list:hover {

background-color: white;}

.td-sml3-bottom-controls {
display: inline-block;
padding: 8px 0;
width: 100%;
z-index: 9;
border-top: 2px dashed #f1f1f1;
border-bottom: 2px dashed #f1f1f1;
font-size: 17px;
font-weight: normal;
line-height: 24px;
margin-bottom: 20px;
}

.td-left-smart-list {
cursor: pointer;
padding: 12px 25px 2px 10px;
left: 0;
text-transform: uppercase;
float: left;
position: relative;
font-size: 17px;
color: #598AFF;
font-style: normal;
right: 0px !important;
width: 100px;
}

.td-right-smart-list{
cursor: pointer;
right: 0;
padding: 2px 10px 2px 10px;
text-transform: uppercase;
float: right;
position: relative;
margin: 8px 12px 8px 2px;
font-size: 17px;
color: #598AFF;
font-style: normal;
}

.td-controls {
display: none;
}

.td-adspot-title {display: none;

}

.block-title {display: none;

}

.@media(max-width:767px){
.td_smart_list_3 .td-sml-figure {
float: none;
margin-left: auto;
margin-right: auto;
}