javascript - add <br> tags at mobile or under specific resolutions - Stack Overflow

admin管理员组

文章数量:1279057

I want to add br tag for mobile view resolution like 320px - 480px. I have tried margin top , bottom but not working. So please help me.

I want add br tag in between these two anchor tag. following two a tag like this.

<a class="ww" href="counseller.html">Career Counsellor</a> 
<a class="xx" href="mentors.html"> Career Mentor</a>

I want to add br tag for mobile view resolution like 320px - 480px. I have tried margin top , bottom but not working. So please help me.

I want add br tag in between these two anchor tag. following two a tag like this.

<a class="ww" href="counseller.html">Career Counsellor</a> 
<a class="xx" href="mentors.html"> Career Mentor</a>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 2, 2015 at 6:35 Tushar 87.2k2121 gold badges163163 silver badges181181 bronze badges asked Oct 2, 2015 at 6:25 DnyanDnyan 19122 gold badges88 silver badges1919 bronze badges 1

• you can use @media to display <br />.... – Sam Teng Wong Commented Oct 2, 2015 at 6:28

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

You can use media query

The class mobile is applied to the <br />. When the width of the browser is less than 320px, the class inside the media query will be applied and the element is shown.

.mobile {
  display: none;
}
@media (max-width: 320px) {
  .mobile {
    display: block;
    /* Add other properties here */
  }
}

<a class="ww" href="counseller.html">Career Counsellor</a>
<br class="mobile" />
<a class="xx" href="mentors.html"> Career Mentor</a>

Another approach would be not to use <br /> tag but to apply block view property and apply margins on the a class only on mobiles with media queries! This way you would not need to add additional br tags, it would be much easier to handle later.

If you using bootstrap you can Also do Simple code which does not need any custom media class in css just like that :

<a class="ww"  href="counseller.html">Career Counsellor</a>
<br class="visible-xs"/>
<a  class="xx"  href="mentors.html"> Career Mentor</a>

You can do it adding class to br like this:

.my-class{
    display: none;
}
@media screen and (min-width: 480px) {

    .my-class{
        display: inline-block;
    }
}

and add the br tag between your <a> like this:

<a class="ww"  href="counseller.html">Career Counsellor</a>
<br class="my-class"/>
<a  class="xx"  href="mentors.html"> Career Mentor</a>

using "media querys" here css codes

.m_br {display:none}
@media screen and (min-witdh : 380px){
    .m_br{
        display:block
    }
}

and html codes

<a class="ww" href="counseller.html">Career Counsellor</a>
<!-- add class m_br -->
<br class="m_br"> 
<a class="xx" href="mentors.html"> Career Mentor</a>

本文标签： javascriptadd ltbrgt tags at mobile or under specific resolutionsStack Overflow