For some reason I can't hide the <br>
tags only show up on small screen sizes. It doesn't show up for small screens. It works for the other screen sizes. It works for other tags. Something about the <br>
tags with the small screen size.
<div class="row">
<img src="static/works_3.jpg" class="img-responsive works-photo col-md-4 col-sm-12"><br class="hidden-xs hidden-md hidden-lg">
<img src="static/works_3.jpg" class="img-responsive works-photo col-md-4 col-sm-12"><br class="hidden-xs hidden-md hidden-lg">
<img src="static/works_3.jpg" class="img-responsive works-photo col-md-4 col-sm-12"><br class="hidden-xs hidden-md hidden-lg">
</div>
Remove <br> Line Break with CSS and Replace with Space To do this we'll use CSS to change the content of the br tag which will prevent it from making a line break. Then we'll also add content using the :after pseudo-element. That will ensure the <br> tag is replaced with a space.
Instead of using the <br> tag, you should use a semantic HTML element and the CSS margin or padding properties if necessary.
Hiding elements Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size. To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.
change <br>
to <div class="hidden-xs hidden-md hidden-lg"></div>
it should help
These clases hidden-md
etc. has been dropped from stable Bootstrap 4. Use these instead: .d-sm-none .d-md-block
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With