-2

Is it possible to hide a div with (or without) Bootstrap 4 if the screen width is over/under a specific value? Does it need javascript for that? More specifically, I'm looking for hiding a specific text (that I find useless on a mobile screen). I tried classes like "hidden-sm-up" but I couldn't make it work. Sorry if it's a basic question...

Benjamin Oll
  • 1
  • 1

1 Answers1

0

media queries in CSS are what you are looking for.

.mydiv{display:block; /*default behavior*/}
@media only screen and (max-width: 400px) { 
.mydiv{display:none; /*hide div on all screens with 700 and lower width*/}
 }

(try dragging the divider between js and outpuut block) https://jsfiddle.net/qaabhmou/

more you can find here: https://www.w3schools.com/css/css3_mediaqueries.asp https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Zorak
  • 709
  • 7
  • 24
  • Why the !important? – iSZ Dec 09 '17 at 00:51
  • the truth is, it is not exactly necessary, but I was working on project, where were quite a few media queries and it was really messy ... sometimes I do it to be really sure this style will be there. I admit, that in simple example like this, it is not necessary. – Zorak Dec 09 '17 at 00:57
  • deleted to prevent of some misleading of questioner, tanks for that – Zorak Dec 09 '17 at 00:58
  • Thanks! I'm not sure if its use is controversial as far as accessibility anymore, but it is still black magic ;) – iSZ Dec 09 '17 at 01:07