Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

add <br> tags at mobile or under specific resolutions

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>
like image 995
Dnyan Avatar asked Oct 02 '15 06:10

Dnyan


People also ask

How can remove BR tag in mobile view?

When you create a line break using 'Shift+Enter', there is a so-called 'br' tag that gets automatically inserted in the code. In order to remove it, you simply need to hide this tag and target the devices or screen widths where you want to hide it.

What are BR tags used for?

<br>: The Line Break element. The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

Is it a good practice to use BR tag?

It is a bad practice to use <br> to separate paragraphs of text. Instead, we should use the <p> tag.

How do you put a space in a BR tag?

You can't change the height of <br> tag as its not an HTML element, it is just an instruction which enforces a line break. br does not take up any space in the page. There is a way by which you can increase line break between lines, is by putting multiple br tags.


2 Answers

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.

like image 21
Lukas Valatka Avatar answered Sep 22 '22 23:09

Lukas Valatka


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>
like image 69
Tushar Avatar answered Sep 23 '22 23:09

Tushar