Add tags on mobile devices or for specific permissions

Question

I want to add a br shortcut to allow mobile viewing, for example 320px - 480px. I tried the top edge but didn't work. So please help me.

I want to add a br label between these two anchor tags. after two tags like this.

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

Run codeHide result

Answer 1

You can use media query

The class mobileapplies to <br />. When the widthbrowser is less than 320 pixels, the class inside the media request will be applied and the item will be displayed.

.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>

Run codeHide result

Answer 2

<br />, a ! br-, .

Answer 3

, br :

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

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

br <a> :

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

Answer 4

"-" css-

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

html-

<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>

Answer 5

, , - - css:

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

Hide result