-1

I used 2 <br> tags to add extra space between 2 <p> tags while developing the desktop view, but now I'm at the mobile view stage and I need to remove at least 1 of the <br> tags. How do I do that?

This is the code.

<p><b>Name:</b> Frank Boter</p>
<p><b>Occupation:</b> Publisher, FBoter books</p>
<p><b>Complaint:</b> </p>
<br><br>
<p style="color: #1388ae;">The guys at goatmedia really know their stuff, </p>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
Ogenna
  • 1
  • 2
  • 2
    Instead of `
    `, you shoud use margins. Then you can have a CSS rule that is combined with media queries so that the margin is less on mobile environments     – Ruan Mendes Jun 29 '20 at 17:10
  • 1
    `
    `s are for line breaks, not for spacing between sections https://stackoverflow.com/questions/1726073/is-it-sometimes-bad-to-use-br     – Ruan Mendes Jun 29 '20 at 17:11
  • It's do you use CSS for that, like margin as recommended or padding, using CSS you can control by Media Querie what space between elements should be used in each resolution, @media(min-width: 768){ ... your rules here ...} @media(max-width: 767){ ... your rules here ...} – rflmyk Jun 29 '20 at 17:28

2 Answers2

1

You could set br {display: none} in css, but I'd recommend you use margin or padding instead of <br> in the first place, and then adjust them accordingly for various screen sizes.

p {
  margin: 0;
}

.info {
  /* larger margin on larger screens */
  margin-bottom: 2rem;
}

@media (max-width: 400px) {
  .info {
    /* smaller margin on smaller screens */
    margin-bottom: 0.5rem;
  }
}
<div class="info">
  <p><b>Name:</b> Frank Boter</p>
  <p><b>Occupation:</b> Publisher, FBoter books</p>
  <p><b>Complaint:</b> </p>
</div>

<p style="color: #1388ae;">The guys at goatmedia really know their stuff, </p>
/* you could but shouldn't do this */
br + br {
  display: none; /* hide any br that immediately follows a br */
}
ray
  • 26,557
  • 5
  • 28
  • 27
  • Oh no, you are providing them with a solution that will encourage them to keep their bad practices. You should at least keep the disclaimer that they are misusing the `
    ` tag instead of CSS margins     – Ruan Mendes Jun 29 '20 at 17:12
  • Yeah. Updating it with a better solution now. – ray Jun 29 '20 at 17:13
1

You can use a media query to hide one <br> tag for certain screen widths. You can adjust the maximum width to meet your needs and multiple queries may be needed to better suit different screen sizes.

@media only screen and (max-width: 600px){
   br + br {
     display: none;
   }
}

However, it is better to use margins instead to more flexibly control the layout spacing and use media queries to reduce the margin on smaller screens.

<p><b>Name:</b> Frank Boter</p>
<p><b>Occupation:</b> Publisher, FBoter books</p>
<p><b>Complaint:</b> </p>
<p style="color: #1388ae;" class="push-top">The guys at goatmedia really know their stuff, </p>
<style>
.push-top {
   margin-top: 1rem;
}
@media only screen and (max-width: 600px){
   .push-top {
      margin-top: 0.5rem;
   }
}
</style>


.push-top {
   margin-top: 1rem;
}
@media only screen and (max-width: 600px){
   .push-top {
      margin-top: 0.5rem;
   }
}
<p><b>Name:</b> Frank Boter</p>
<p><b>Occupation:</b> Publisher, FBoter books</p>
<p><b>Complaint:</b> </p>
<p style="color: #1388ae;" class="push-top">The guys at goatmedia really know their stuff, </p>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80