根据窗口大小添加 <br><br> 这个标签

Question

Need to add this a break tag at the end of the li tag for a mobile version and hide it for desktop.So wht function to write and what window size to select?

<li class="border_bottom_none" id="userbenifit">
    Benefit
    <em class="sub_text_heading float_right">
        <div id="benefitId"></div>
    </em>
</li>

Since i am dynamically calling a function to dispplay benefit it, its content character size may differ. hence for a long description it doesnt get displayed well. Adding a break tag would solve if i can find the window size and break to display the same

Answer 1

Use jquery window resize

$(window).resize(function(){
if($(window).width() < 640){   // take 640 as your breakpoint
 $("#userbenifit").append("<br/><br/>");
}else{
// remove br
}
})

or use media-query and add margin-bottom :

<li class="border_bottom_none added-class" id="userbenifit">
    Benefit
    <em class="sub_text_heading float_right">
        <div id="benefitId"></div>
    </em>
</li>

css:

@media only screen and (max-width: 640px)  {
 .added-class{
   margin-bottom : 2em;
 }
}

Answer 2

I guess something like this might work :

$(function(){
    if($(window).width() < 600) // change this to your breakpoint
    {
        $("#userbenifit").append("<br/><br/>");
    }
})