CSS - display:none action not working - html

Question

I have a staff section on a Wordpress site I'm building with hover effects across each staff member image showing their name, job title and bio.
The staff bio's are quite long and the client is reluctant to change them, however, when looking at the effects on tablet/mobile screen sizes the bios don't fit the smaller image.
I've tried changing the font-size but if I reduce it any further the text will be unreadable.
Rather than change the bio size what I want to do in the media queries is block out the bio's and just leave the name & title using display:none; for the bio <p> tags but I can't get it to work.
Is this the best way to do it?
This is the code for one of the images -
html/php
<div class="staff">
<div class="masonry">
<div class="brick">
<?php if( get_field('whoweare_image1') ): ?>
<img src="<?php the_field('whoweare_image1'); ?>" />
<?php endif; ?>
<div class="details">
<span id="info">
<h3><?php the_field('whoweare_name1'); ?></h3>
<p class="bio"><?php the_field('whoweare_text1'); ?></p>
</span>
</div>
</div>
<!-- identical code for other staff member images -->
</div>
</div>
And this is what I've tried for the media queries (for ipad/tablet portrait) -
style.css
#media only screen and (min-width: 750px) and (max-width: 960px) {
.staff .brick .details #info .bio p {
display: none;
}
}
I added the bio class to the <p> tags after I tried this CSS rule below and it blocked out the whole text including name/title -
#media only screen and (min-width: 750px) and (max-width: 960px) {
.staff .brick .details #info p {
display: none;
}
}
Any assistance would be appreciated.

Answer 1

The selector has to be
.staff .brick .details #info p.bio { ... }
("bio" is the class applied to the p tag)

Answer 2

your target wrong
#media only screen and (min-width: 750px) and (max-width: 960px) {
.staff .brick .details #info p.bio {
display: none;
}
}
https://jsfiddle.net/pcto2Lkj/1/

Answer 3

You can do like below css styles.
#media only screen and (min-width: 750px) and (max-width: 960px) {
.staff .details #info .bio {
display: none;
}
}

Answer 4

Having inspected the elements a little closer I discovered that Wordpress have done that strange thing and added a class to the <p> tag - <p class="p2">so I targeted this attribute and it worked -
.staff .brick .details #info p.p2 {
display: none ;
}
I don't fully understand why these attributes are created, however, this has cleared up why the <p> tag wouldn't work.